Question

我有嵌套组件在第一部分中，我有

<div class="single-proposal-wrapper" (mouseover)="showCheckBox(request.id)" (mouseout)="hideCheckBox(request.id)"> 
  <div [id]="request.id" class="proposal-checkbox" (click)="toggleRequestState($event)"></div>
  <app-documents-list
    [reqdocuments] = "documents"
    [reqId] = "request.id"
  ></app-documents-list>
</div>

这是app-docuemnt-list

<div>
<app-document-tile
  *ngFor="let doc of reqdocuments"
  [rdocument]="doc"
  [reqId] = "reqId"
></app-document-tile>
</div>

和该app-document-tile

  <div class="item chx-approve">
    <checkbox #rdocument.id [checked]="isCheckedApproved" (change)="approveDoc(rdocument.id)"></c-checkbox>
  </div>
  <div class="item chx-reject">
    <checkbox #rdocument.id [checked]="isCheckedRejected" (change)="rejectDoc(rdocument.id)"></c-checkbox>
  </div>

当我单击带有class =“ proposal-checkbox”的复选框时，将更新由app-document-list中的* ngfor生成的特定单个app-doucment-tile（所有已批准的复选框）。

我应该使用一些ID绑定嵌套的组件，然后将此ID通过@Input @Output还是使用Observable？我只会更新ngfor生成的一个元素。

Answer 1

您可以在* ngFor中添加索引引用：

<div *ngFor=let item of items; let i = index">
  <child-component [id]="i"></child-component>
</div>

Answer 2

trackBy将对您的问题进行排序

在迭代器中添加，移动或删除项目时，伪指令必须重新呈现适当的DOM节点。为了最大程度地减少DOM中的流失，仅重新渲染已更改的节点。

<li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>

然后根据您的要求实现您的trackByFn函数

如何更新ngfor生成的specyfic元素

2 个答案: