选择标签空白值-角4

Question

我正在尝试将一个属性绑定到select标记。但是，每次我选择一个选项时，它都会更改属性值，但将select值保留为空白。

看上去是这样的。

​

<div>
  <label for="base">Base</label>
  <select (change)="getLatest(selected)" [(ngModel)]="selected" ngOptions>
    <option *ngFor="let currency of currencies" value="{{currency}}">{{currency}}</option>
  </select>
</div>

<h2>{{response.base}}   {{response.date}}</h2>

​

TS

​

    export class ListComponent implements OnInit {
    
      constructor(private ratesService: RatesService) { }
    
      response = {
        'base': null,
        'date': null,
        'rates': {
          null: null
        }
      };
    
      currencies: string[] = Object.keys(this.response.rates);
    
      selected = 'EUR';
    
      getLatest(base?: string): void {
        this.ratesService.getLatest(base).subscribe(response => {
          this.response = response;
          this.currencies = Object.keys(response.rates).sort((a, b) => a.localeCompare(b));
        });
      }
    
      ngOnInit() {
        this.getLatest();
      }
    }

​

PS:服务从Fixer.io/最新返回rest

Answer 1

每次选择调用getLatest的新选项时，在该方法中，您都会更改this.currencies的值，这个值最初用于创建select选项的对象是同一个对象，因此角需要为这个新数组创建新的选项，而这些选项还没有被选中。

要解决这个问题：

• 这种方法预期this.ratesService.getLatest(base)会返回一个新的货币列表吗？和：
• 每次选择新选项时，是否需要更新货币列表？

在我看来，更新this.currencies只需要在ngOnInit方法中完成一次，所以您应该从模板文件中删除(change)="getLatest(selected)"。无论您想要用这个(change)=...实现什么，都应该调用不同的方法，而不是getLatest。