动态生成的行中的数据绑定与下拉答案

【问题标题】：Data binding in dynamically generated rows with dropdown动态生成的行中的数据绑定与下拉
【发布时间】：2018-09-07 18:29:25
【问题描述】：

我有一个表格，可以动态生成包含上传文件详细信息的行。这些行有一个下拉菜单来选择文件类型。

我目前遇到了动态生成的下拉菜单的问题。如果我在任何一个下拉列表中选择一个值，它会为所有行中的所有下拉列表设置相同的值。

HTML：

<table>
 <thead>
  <tr>
   <th>File Name</th>
   <th>File Type</th>
  </tr>
 </thead>

 <tbody>
  <tr *ngFor="let item of uploader.queue">
   <td>
    {{ item?.file?.name }}
   </td>

   <td>
    <mat-form-field>
      <mat-select  placeholder="Select File Type" [(ngModel)]="selectedType">
        <mat-option *ngFor="let type of Types" [value]="type.type">
          {{type.type}}
        </mat-option>
       </mat-select>
     </mat-form-field>
   </td>
   <td>
    <button (click)="AddPdf(item)">Upload</button>
   </td>
  </tr>
 </tbody>
<table>

TS：

public AddPdf(Filenames: FileItem) {
  this.data = { filename: FileNames.file.name.toString() , LetterName:this.selectedLetterName, LetterType: this.selectedType };
  console.log(this.data.filename, 'File Name');
  console.log(this.data.LetterName, 'Letter Name');
  console.log(this.data.LetterType, 'Letter Type');
}

现在，如果我添加三个文件，则会生成三行。如果我为一行选择文件类型，所有行都会反映相同的情况。

请帮助我理解这里的缺陷！

感谢任何帮助。

【问题讨论】：

你能把ts文件也加进去吗？
@Or Yaacov 也添加了 TS 部分。
[(ngModel)]="selectedType" 将每个下拉列表绑定到单独的 selectedType 变量。您需要将ngModel 绑定到一个变量，该变量对于您的uploader.queue 中的每个items 都不同。
丹尼尔，感谢您的回复。我理解我的错误，我现在正试图弄清楚如何将它与队列中的每个项目联系起来。

标签： angular typescript angular-material angular-ngmodel

【解决方案1】：

我发现了问题。我没有将 [(ngModel)] 分为以下两部分：

        <mat-form-field>
          <mat-select
            placeholder="Select Letter Name"
            #lettername
            [ngModel]="selectedLetterName"
            (ngModelChange)="onLetterNameSelect($event)"
            [ngModelOptions]="{standalone: true}">
            <mat-option *ngFor="let LetterName of LetterNames" [value]="LetterName.ReportName">
              {{LetterName.ReportName}}
            </mat-option>
          </mat-select>
        </mat-form-field>

更改后效果符合我的预期。

【讨论】：