使用下拉列表动态生成的行中的数据绑定
Data binding in dynamically generated rows with dropdown
我有一个 table 可以动态生成包含上传文件详细信息的行。这些行有一个 select 文件类型的下拉列表。
我目前遇到动态生成下拉列表的问题。如果我 select 任何一个下拉列表中的值,它将为所有行中的所有下拉列表设置相同的值。
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');
}
现在,如果我添加三个文件,将生成三行。如果我 select 一行的文件类型,所有行都会反映相同的情况。
请帮我理解这里的漏洞!
感谢任何帮助。
我想通了。我没有将 [(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>
修改后效果如我所料。
我有一个 table 可以动态生成包含上传文件详细信息的行。这些行有一个 select 文件类型的下拉列表。
我目前遇到动态生成下拉列表的问题。如果我 select 任何一个下拉列表中的值,它将为所有行中的所有下拉列表设置相同的值。
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');
}
现在,如果我添加三个文件,将生成三行。如果我 select 一行的文件类型,所有行都会反映相同的情况。
请帮我理解这里的漏洞!
感谢任何帮助。
我想通了。我没有将 [(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>
修改后效果如我所料。