我已成功实现了角度的父子输入输出通信 . 我正在通过孩子的现有产品

parent.html

<tr *ngFor="let product of productList"> 
    <app-stock-popup *ngIf="product.isCheckInPopUp" (exitModalComp)="saveModalProductEntries($event)"
    [productChild]="product">
    </app-stock-popup>
    <button (click)="openChildComp()">Open Child </button>
    </tr>

parent.component.ts

openChildComp(product)
    {
    product.isCheckInPopUp = true;
    }

Child.component.ts

@Input() productChild: ProductRow<ProductCategory, ProductItemDetails>;
  @Output() exitModalComp: EventEmitter<any> = new EventEmitter<any>();

//For emitting  Child comp
this.exitModalComp.emit(this.productChild);

Now my question is 我应该将子组件选择器放在循环内部或外部 .

<tr *ngFor="let product of productList"> 

        </app-stock-popup>
        <button (click)="openChildComp()">Open Child </button>
        </tr>
   <app-stock-popup *ngIf="otherBoolean" (exitModalComp)="saveModalProductEntries($event)"
        [productChild]=" some input List">

哪种方法更好，为什么？ 1.如果我将选择器放在* ngFor中，是否需要更多内存 . 2. HTML呈现的次数是* ngFor中的项目的次数

我的朋友建议我将选择器放在* ngFor之外，因为孩子需要更多的记忆或更多的HTML渲染 . 他是对的

我的意见是* ngIf从DOM中删除元素（子），所以两者都是一样的 .

需要解释 .

angular typescript