如何绑定(设置)现有值以在angular6中进行mat选择

问题描述 投票:0回答:1

我有一个下拉菜单,我已经使用了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

我无法理解如何绑定现有数据。尝试了很多,但是到现在为止还没有运气。

非常感谢您的帮助。抱歉,如果我没有正确张贴问题,请提前

angular
1个回答
0
投票

您可以简单地使用[(ngModel)]设置现有值。

从您的stackbiltz示例,

Forked Stackbiltz Demo

。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'
© www.soinside.com 2019 - 2024. All rights reserved.