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

Question

我想使用[(ngModel)]来基于选定的下拉列表设置输入值。

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

这是我创建的堆栈闪电战 ，到目前为止我已经尝试过。

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，其中包含我在评论中描述的解决方案。 我认为您应该重构代码，因为我不确定它在做什么。