[英]Angular ngIf: Identifier 'length' is not defined
My component has the property transfers$ that is an observable that can comes with an array or an object that contains the error message.我的组件具有属性 transfer$ ,它是可观察到的,可以带有包含错误消息的数组或 object 。 I can only input [items] when transfers$ is Transfer[].
当transfers$为Transfer[]时,我只能输入[items]。 But even using condition
但即使使用条件
<app-checklist *ngIf="transfers?.length > 0" [items]="transfers"></app-checklist>
angular continues warning: angular 继续警告:
Identifier 'length' is not defined.未定义标识符“长度”。 'Transfer[] |
'转移[] | AppResponseError' does not contain such a member
AppResponseError' 不包含这样的成员
Why is that?这是为什么?
Thank you谢谢
component.html组件.html
<ng-template #loadingTpl>loading</ng-template>
<ng-template #emptyList let-length="length">
<p *ngIf="length === 0">Empty List</p>
</ng-template>
<ng-template #error let-title="title" let-message="message" let-code="code">
<div *ngIf="code">
Error: {{code}} , {{title}} , {{message}}
</div>
</ng-template>
<div *ngIf="transfers$ | async; let transfers; else loadingTpl">
<app-checklist *ngIf="transfers?.length > 0" [items]="transfers">
<div *ngFor="let transfer of transfers">
..something here
</div>
</app-checklist>
<ng-container *ngTemplateOutlet="emptyList; context: {length: transfers.length}"></ng-container>
<ng-container *ngTemplateOutlet="error; context:transfers"></ng-container>
</div>
TransferService.ts: TransferService.ts:
import { Injectable } from '@angular/core';
import { of } from 'rxjs';
@Injectable()
export class TransfersService {
transfers$ = of('real observable');
}
component.ts组件.ts
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { TransfersService } from './TransfersService';
export interface AppResponseError = {code:number,title:string,message:string};
export interface Transfer = {id:number,title:string};
@Component({
selector: 'app-transfer',
})
export class TransferComponent implements OnInit {
transfers$: Observable<Transfer[] | AppResponseError>;
constructor(private transfersService: TransfersService) {
this.transfers$ = this.transfersService.transfers$;
}
ngOnInit() {
this.transfers$.subscribe((data) => {
console.log(data);
});
}
}
You do not need additional *ngIf.您不需要额外的 *ngIf。
<div *ngIf="transfers$ | async; let transfers; else loadingTpl">
What this will do is wait until transfers$ |这将做的是等到转帐$ | async has evaluated, and bind the result to the value of transfers (non-dollar-suffixed).
async 已评估,并将结果绑定到 transfer 的值(非美元后缀)。
create below function in ts file.在 ts 文件中创建下面的 function。
isDataAvailable(arr){
return Array.isArray(arr) && arr.length >0
}
and use it in template like this并像这样在模板中使用它
<app-checklist *ngIf="isDataAvailable(transfers)" [items]="transfers"></app-checklist>
<div *ngIf="transfers$ | async; let transfers; else loadingTpl">
<app-checklist *ngIf="isDataAvailable(transfers)" [items]="transfers"></app-checklist>
<div *ngFor="let transfer of transfers">
..something here
</div>
<ng-container *ngTemplateOutlet="emptyList; context: {length: transfers.length}"></ng-container>
<ng-container *ngTemplateOutlet="error; context:transfers"></ng-container>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.