使用routerLink时出现Ng0901错误

Question

本周我遇到了NG0901错误(是的，除了这个错误没有其他消息(我不知道为什么，因为看起来这是由于RouterLink没有正常工作。

总之，这是一个面包店的订单经理。剩下的只是修改添加或删除客户端、仓库等的参数页面。

所以我创建了一个第一个页面，它调用params，这个页面有一个带有routerLink元素的按钮到其他4个页面。

这是我的参数页面的html代码：

<ion-header>
<ion-toolbar>
<ion-title>P.I.C 2.0 - Paramétre</ion-title>
<ion-back-button slot="start" color="primary" defaultHref="home"></ion-back-button>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<table>
<tr>
<td><ion-button> <a routerLink="params-client">Client</a></ion-button></td>
<td><ion-button routerLink="./params_depot">Depot</ion-button></td>
<!--<td><ion-button  routerLink="../depot">Feuille depot</ion-button></td>-->
</tr>
<tr>
<td><ion-button routerLink="params-boul">Produit Boulangerie</ion-button></td>
<td><ion-button routerLink="params_pat">Produit Patisserie</ion-button></td>
<!--<td><ion-button routerLink="../params">Paramètre</ion-button></td>-->
</tr>
</table>
</ion-content>

这个链接是离子按钮和路由器链接的异常行为

这里还有我的ng版本

ng—版本

这里还有StackTrace:

ERROR Error: Uncaught (in promise): Error: NG0901
Error: NG0901
at e.find (main.js:1:604380)
at C.ngDoCheck (main.js:1:468239)
at Xa (main.js:1:501521)
at cs (main.js:1:501322)
at xi (main.js:1:501042)
at $i (main.js:1:524323)
at sy (main.js:1:531388)
at Vv (main.js:1:525062)
at $i (main.js:1:525073)
at Hv (main.js:1:525433)
at fe (polyfills.js:1:137971)
at fe (polyfills.js:1:137482)
at polyfills.js:1:138833
at S.invokeTask (polyfills.js:1:128604)
at Object.onInvokeTask (main.js:1:583005)
at S.invokeTask (polyfills.js:1:128525)
at S.runTask (polyfills.js:1:123644)
at P (polyfills.js:1:130949)
at S.invokeTask [as invoke] (polyfills.js:1:129774)
at x (polyfills.js:1:142703)
zm @ main.js:1

我还添加了routerLink所指向的typescript和html页面：

import { Component, OnInit } from '@angular/core';
import {HttpRequestService} from "../../http-request.service";
@Component({
selector: 'app-params-client',
templateUrl: './params-client.page.html',
styleUrls: ['./params-client.page.scss'],
})
export class ParamsClientPage implements OnInit {
public client:any = {}
constructor(private http: HttpRequestService) {
this.http.get_client_all((data) => {
this.client = data;
});
}
ngOnInit() {
}
}

<ion-header>
<ion-toolbar>
<ion-title>P.I.C 2.0 - Parémetre Client </ion-title>
<ion-back-button slot="start" color="primary" defaultHref="params" ></ion-back-button>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-grid>
<ion-row>
<ion-col>Id</ion-col>
<ion-col>Nom</ion-col>
<ion-col>Lieu</ion-col>
<ion-col>Téléphone</ion-col>
<ion-col>Modifier</ion-col>
<ion-col>Supprimer</ion-col>
</ion-row>
<ion-row *ngFor="let c of client">
<ion-col>{{c.id_client}}</ion-col>
<ion-col>{{c.name}}</ion-col>
<ion-col>{{c.lieu}}</ion-col>
<ion-col>{{c.tel}}</ion-col>
<ion-col>
<ion-button>Modifier</ion-button>
</ion-col>
<ion-col>
<ion-button>Supprimer</ion-button>
</ion-col>
</ion-row>
</ion-grid>

</ion-content>

Answer 1

问题似乎是因为以下属性初始化代码：

public client:any = {}

client被定义为一个对象，而不是一个数组，因此在*ngFor="let c of client"期间会出现错误。

NgFor只支持绑定到数组等可伸缩对象。如果您希望从HTTP调用接收到的data是一个数组，那么您应该而不是使用空对象{}初始化client。可以分配[]，也可以完全不分配。

如果client确实是一个对象，那么您应该使用KeyValuePipe来迭代对象。

将Object或Map转换为键值对数组。