我有一个下拉菜单,我已经使用了mat-select。如果是单选或多选,则可以正常工作,在绑定现有值等时没有问题。
我的要求是,我应该能够创建和删除动态行。现在,每个动态行在每一列中都有两个下拉菜单。
因此,我使用了一个简单的表结构,和和。
让我分享代码,
<tr *ngFor="let person of lienPositionData; let i = index">
<td>
<mat-form-field appearance="legacy" floatLabel="never">
<mat-select formControlName="associatedLoan" name="associatedLoan"
[(ngModel)]="person.id">
<div>
<mat-option
*ngFor="let lnDDL of loanDropDownMultiSelect | searchDocs:{productName: searchLoan}"
[value]="lnDDL.id"
style="cursor: pointer; margin: 6px; height: 38px;font-size: 14px;">
{{lnDDL.productName}}
</mat-option>
</div>
</mat-select>
</mat-form-field>
</td>
<td>
<mat-form-field appearance="legacy" class="inline-block">
<mat-select placeholder="Select" formControlName="lienPosition"
name="lienPosition"
[(ngModel)]="person.text">
<mat-option></mat-option>
</mat-select>
</mat-form-field>
</td>
<td>
<span class="table-remove">
<button type="button" class="collateral-detail-button-remove"
(click)="remove(i)"
mat-flat-button>Remove</button>
</span>
</td>
</tr>
</table>
lienPositionData是基于此的东西,会生成行,并且其中包含要绑定到DDL的现有数据。
例如,如果lienPositionData有2条记录,则为两行。而且,这些独特的记录还可以绑定到两个diff DDL。
但是现在我可以绑定了,但是对于两个DDL都一样,
示例,lienPositionData [0]-id:1,名称:testlienPositionData 1-id:2,名称:test2
所以test2绑定到两个下拉列表。
请找到img,
[[DDL,数据已绑定两次,或最后一条记录已绑定]
https://i.stack.imgur.com/fnrNt.png
我无法理解如何绑定现有数据。尝试了很多,但是到现在为止还没有运气。
非常感谢您的帮助。抱歉,如果我没有正确张贴问题,请提前
您可以简单地使用[(ngModel)]
设置现有值。
从您的stackbiltz示例,
。html
<mat-form-field>
<mat-select placeholder="Favorite food" [(ngModel)]="selectedFood">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
。ts
selectedFood = 'pizza-1'