Question

由于缺乏知识，我无法在 ngFor 中更改组件的实例。

<div  *ngFor="let xen of xens; let idx = index">
     <div class="col-md-2">
         <input type="button" (click)="app-xeneditor.Hide==true" value="Edit Xen">
     </div>
     <app-xeneditor [Xen]="xen" [Hide]="true"></app-xeneditor>
</div>

当我点击Edit Xen按钮时，我希望只显示编辑器行。我不清楚如何在ngFor

中更新组件app-xeneditor的参数

Answer 1

将编辑器状态保持在数组中。

public isEditorVisible: boolean[] = [];

可能需要使用xens中的项目初始化此数组，所有项目都设置为false。当xens可用时，请确保这样做。

现在，在模板中，让input元素调用一个方法，该方法将适当地设置可见性标记，并使用ngIf来控制app-xeneditor元素的可见性。

<div *ngFor="let xen of xens; let idx = index">
  <div class="col-md-2">
    <input type="button" (click)="showEditor(idx)" value="Edit Xen">
  </div>
  <app-xeneditor *ngIf="isEditorVisible[idx]" [Xen]="xen"></app-xeneditor>
</div>

然后定义方法showEditor看起来像这样：

public showEditor(idx: number): void {
  for (let i = 0; i < xens.length; i++) {
    isEditorVisible[i] = (i === idx);
  }
}

Answer 2

您可以在组件中定义HI

bool_var:boolean =false

然后你的html文件

<div  *ngFor="let xen of xens; let idx = index">
     <div class="col-md-2">
         <input type="button" (click)="bool_var=true" value="Edit Xen">
     </div>
     <app-xeneditor [Xen]="xen" [Hide]="bool_var"></app-xeneditor>
</div>

在ngFor中显示组件的实例

2 个答案: