根据选定的下拉值设置输入值

Question

使用 [(ngModel)]，我想根据选定的下拉菜单设置输入值。

我已经设法将选定的下拉列表绑定到输入字段，但如果选定的下拉列表值是数组，我无法绑定它。我需要将多个数组属性绑定到多个输入字段。

这是我创建的 stackblitz 以及到目前为止我尝试过的内容。

TypeScript 文件：

savedCards = [];
selectedCard = '';

selectDropdownCard(card) {
  this.savedCards.find((item) => item.id === card.id)
    ? this.savedCards = this.savedCards.filter((item) => item.id === card.id)
    : this.savedCards = [card];
  this.assignToNgModel();
}

assignToNgModel() {
  this.selectedCard = '';
  this.savedCards.map((item) => this.selectedCard += item.viewValue + ' ');
  this.savedCards.forEach((item) => {
    console.log(item);
  });
  console.log(this.selectedCard);
}

HTML 文件:

<div class="div1" (click)="selectSavedCard()" [(ngModel)]="selectedCard" ngDefaultControl>
  <div *ngIf='!hasSelected'>
    <div>
      <p>dropdown</p>
    </div>
  </div>
  <div *ngFor="let card of savedCards">
    <div>
      <p>{{card.viewValue}}</p>
    </div>
  </div>
</div>

<div class="div2" *ngIf="show">
  <div *ngFor="let card of savedCreditCards" (click)="selectDropdownCard(card)">
    <div>
      <p>{{card.viewValue}}</p>
    </div>
  </div>
</div>

<input placeholder="id" [(ngModel)]="selectedCard" type="text">
<input placeholder="viewValue" [(ngModel)]="selectedCard" type="text">
<input placeholder="name" [(ngModel)]="selectedCard" type="text">
<input placeholder="value" [(ngModel)]="selectedCard" type="text">

我可以使用一些指导和建议来解决这个问题。

Answer 1

这是分叉的 stackblitz https://stackblitz.com/edit/angular-vpvjff，其中包含我在评论中描述的解决方案。我认为你应该重构你的代码，因为我不确定它在做什么。

根据选定的下拉值设置输入值

set input value based on selected dropdown value

foreach

typescript

angular-ngmodel

angular