html - 在组件中引用 ngFor 值

Question

我有一个嵌套的 ngFor 语句。我需要在单击按钮时检索我的第一个 ngFor 的值。

我尝试了以下方法:

• 使用模板引用变量
• 使用属性绑定(bind)
• 使用输入装饰器

这是我的代码:

<mat-expansion-panel  *ngFor="let item of Datasource;">
  <mat-expansion-panel-header  style="display:flex" class="mat-row">
    {{item.Header}}

  </mat-expansion-panel-header>

  <mat-selection-list [(ngModel)]="selectedOptions">
    <mat-list-option  *ngFor="let line of item.match;  let i= index;" [value]="line">
      <div class="container-name">
        <div class="col-6">{{i}} - {line.user.Name }}  vs {{ line.user.Address }}</div>

    </mat-list-option>
  </mat-selection-list>

  <div style="text-align:center; padding: 20px">
    <button mat-raised-button color="primary" (click)="submit()" type="submit">Add</button>
  </div>

</mat-expansion-panel>

这能实现吗？

Answer 1

好吧，您需要先克隆该对象属性。由于该对象链接到模板，因此当您操作它时，它也会在模板上进行操作。您可以使用 var obj = Object.assign({}, actual obj) 然后对 obj 而不是实际对象进行操作。然后它不会受到模板的影响。希望对您有所帮助。