Question

我正在尝试列出ngFor中来自JSON响应的所有国家，还尝试使用US将Canada和unshift移动到列表顶部

这是代码

let newData = this.countries.filter(item => item.CountryCode!=='CA');
newData.unshift({idCity:39,countryName:'Canada',countryCode:'CA'});
newData = newData.filter(item => item.CountryCode!=='US');
newData.unshift({idCity:231,countryName:'United States',countryCode:'US'});
this.countries = newData;
console.log(this.countries);

我在console.log(this.countries);中得到了正确的结果，但是未移动的对象未显示在ngFor中

<div class="drop_option col-xs-12" *ngFor="let countries of countries; let i = index" (click)="fetchCountries(i,$event)">{{countries.CountryName}}</div>

Answer 1

这只是一个错字。

newData.unshift({idCity:39,countryName:'Canada',countryCode:'CA'});
<div class="drop_option col-xs-12" *ngFor="let countries of countries; let i = index" (click)="fetchCountries(i,$event)">{{countries.CountryName}}</div>

请注意，您在模板中执行countryName和unshift时已使用属性CountryName。

请利用打字稿来快速识别此类错误

创建接口/类

export interface CountryItem {
  idCity: number;
  CountryCode: string;
  CountryName: string;
}

并强烈键入变量

public countries: CountryItem[];

这样做，IDE的linter可以识别出诸如此类的错误，从而节省了时间。

未移动的数组元素未在angular5

1 个答案:

Stackblitz