Question

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

HTML

<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/latest返回休息

Answer 1

每次选择新选项时，都会调用getLatest，并在该方法中更改this.currencies的值，该值与第一个用于创建select选项的对象相同因此，Angular需要为新数组创建新的选项，但尚未选择任何选项。

解决此问题：

此方法this.ratesService.getLatest(base)是否会返回新的货币列表？和：
每次选择新选项时，是否需要更新货币列表？

我觉得更新this.currencies只需要在ngOnInit方法中完成一次，因此您应该从模板文件中删除(change)="getLatest(selected)"。无论你想用(change)=...完成什么，都应该调用不同的方法，而不是getLatest

选择标记空白值 - Angular 4

1 个答案: