如何解决 Angular 7“尝试区分错误......只允许数组和可迭代对象”错误?(How to resolve Angular 7 "Error trying to diff ... Only arrays and iterables are allowed" error?)

问题

我正在使用 Angular 7。我在渲染存储在我的模型中的数据时遇到问题。 我的 src/app/app.component.ts 文件中有这个

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  currencies: Currency[] = [];
  title = 'app';
  apiStatus: string;
  constructor(private _currencySrv: CurrencyService) { }

  ngOnInit() {
    this._currencySrv.index().subscribe(currencies => {
        this.currencies = currencies;
    });
  }

  refresh() {
    this._currencySrv.refresh().subscribe(
      currencies => this.currencies = currencies);
  }

}

我的 src/app/app.component.html 文件中有这个...

<ul *ngFor="let currency of currencies">
  <li>
    <div>{{currency.name}}</div>
    <div>{{currency.country}}</div>
    <div>{{currency.rate / 100}}</div>
  </li>
</ul>

<button (click)="refresh()">Refresh</button>

b

ut 当我访问我的主页时,我收到以下 JS 错误...

ERROR Error: Error trying to diff '[{"id":2,"name":"EUR","rate":1,"country":"Europe","created_at":"2019-08-15T13:42:23.606Z","updated_at":"2019-08-15T13:42:23.606Z"},{"id":3,"name":"USD","rate":110,"country":null,"created_at":"2019-08-15T19:51:33.158Z","updated_at":"2019-08-16T20:07:59.277Z"},{"id":4,"name":"JPY","rate":11777,"country":null,"created_at":"2019-08-15T19:51:33.173Z","updated_at":"2019-08-16T20:07:59.289Z"},{"id":5,"name":"BGN","rate":195,"country":null,"created_at":"2019-08-15T19:51:33.178Z","updated_at":"2019-08-15T19:51:33.181Z"},{"id":6,"name":"CZK","rate":2573,"country":null,"created_at":"2019-08-15T19:51:33.185Z","updated_at":"2019-08-16T20:07:59.299Z"},{"id":7,"name":"DKK","rate":745,"country":null,"created_at":"2019-08-15T19:51:33.189Z","updated_at":"2019-08-15T19:51:33.191Z"},{"id":8,"name":"GBP","rate":91,"country":null,"created_at":"2019-08-15T19:51:33.195Z","updated_at":"2019-08-15T19:51:33.197Z"},{"id":9,"name":"HUF","rate":32477,"country":null,"created_at":"2019-08-15T19:51:33.200Z","updated_at":"2019-08-16T20:07:59.306Z"},{"id":10,"name":"PLN","rate":433,"country":null,"created_at":"2019-08-15T19:51:33.205Z","updated_at":"2019-08-16T20:07:59.309Z"},{"id":11,"name":"RON","rate":472,"country":null,"created_at":"2019-08-15T19:51:33.209Z","updated_at":"2019-08-15T19:51:33.211Z"},{"id":12,"name":"SEK","rate":1071,"country":null,"created_at":"2019-08-15T19:51:33.215Z","updated_at":"2019-08-16T20:07:59.315Z"},{"id":13,"name":"CHF","rate":108,"country":null,"created_at":"2019-08-15T19:51:33.220Z","updated_at":"2019-08-15T19:51:33.223Z"},{"id":14,"name":"ISK","rate":13769,"country":null,"created_at":"2019-08-15T19:51:33.226Z","updated_at":"2019-08-16T20:07:59.320Z"},{"id":15,"name":"NOK","rate":996,"country":null,"created_at":"2019-08-15T19:51:33.233Z","updated_at":"2019-08-16T20:07:59.322Z"},{"id":16,"name":"HRK","rate":738,"country":null,"created_at":"2019-08-15T19:51:33.238Z","updated_at":"2019-08-15T19:51:33.239Z"},{"id":17,"name":"RUB","rate":7338,"country":null,"created_at":"2019-08-15T19:51:33.243Z","updated_at":"2019-08-16T20:07:59.327Z"},{"id":18,"name":"TRY","rate":615,"country":null,"created_at":"2019-08-15T19:51:33.248Z","updated_at":"2019-08-16T20:07:59.330Z"},{"id":19,"name":"AUD","rate":163,"country":null,"created_at":"2019-08-15T19:51:33.261Z","updated_at":"2019-08-16T20:07:59.333Z"},{"id":20,"name":"BRL","rate":440,"country":null,"created_at":"2019-08-15T19:51:33.266Z","updated_at":"2019-08-16T20:07:59.336Z"},{"id":21,"name":"CAD","rate":147,"country":null,"created_at":"2019-08-15T19:51:33.270Z","updated_at":"2019-08-16T20:07:59.338Z"},{"id":22,"name":"CNY","rate":779,"country":null,"created_at":"2019-08-15T19:51:33.274Z","updated_at":"2019-08-16T20:07:59.341Z"},{"id":23,"name":"HKD","rate":868,"country":null,"created_at":"2019-08-15T19:51:33.278Z","updated_at":"2019-08-16T20:07:59.343Z"},{"id":24,"name":"IDR","rate":1575339,"country":null,"created_at":"2019-08-15T19:51:33.283Z","updated_at":"2019-08-16T20:07:59.346Z"},{"id":25,"name":"ILS","rate":393,"country":null,"created_at":"2019-08-15T19:51:33.287Z","updated_at":"2019-08-16T20:07:59.348Z"},{"id":26,"name":"INR","rate":7880,"country":null,"created_at":"2019-08-15T19:51:33.292Z","updated_at":"2019-08-16T20:07:59.351Z"},{"id":27,"name":"KRW","rate":133860,"country":null,"created_at":"2019-08-15T19:51:33.296Z","updated_at":"2019-08-16T20:07:59.353Z"},{"id":28,"name":"MXN","rate":2163,"country":null,"created_at":"2019-08-15T19:51:33.301Z","updated_at":"2019-08-16T20:07:59.356Z"},{"id":29,"name":"MYR","rate":462,"country":null,"created_at":"2019-08-15T19:51:33.305Z","updated_at":"2019-08-16T20:07:59.358Z"},{"id":30,"name":"NZD","rate":172,"country":null,"created_at":"2019-08-15T19:51:33.309Z","updated_at":"2019-08-16T20:07:59.361Z"},{"id":31,"name":"PHP","rate":5801,"country":null,"created_at":"2019-08-15T19:51:33.313Z","updated_at":"2019-08-16T20:07:59.364Z"},{"id":32,"name":"SGD","rate":153,"country":null,"created_at":"2019-08-15T19:51:33.317Z","updated_at":"2019-08-16T20:07:59.367Z"},{"id":33,"name":"THB","rate":3420,"country":null,"created_at":"2019-08-15T19:51:33.321Z","updated_at":"2019-08-16T20:07:59.370Z"},{"id":34,"name":"ZAR","rate":1680,"country":null,"created_at":"2019-08-15T19:51:33.325Z","updated_at":"2019-08-16T20:07:59.373Z"}]'. Only arrays and iterables are allowed
    at DefaultIterableDiffer.diff (core.js:7515)
    at NgForOf.ngDoCheck (common.js:2592)
    at checkAndUpdateDirectiveInline (core.js:12414)
    at checkAndUpdateNodeInline (core.js:13935)
    at checkAndUpdateNode (core.js:13878)
    at debugCheckAndUpdateNode (core.js:14771)
    at debugCheckDirectivesFn (core.js:14712)
    at Object.eval [as updateDirectives] (AppComponent.html:2)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14697)
    at checkAndUpdateView (core.js:13844)

更多相关内容:请点击查看