当尝试将NgForOf指令应用于一个联合类型数组时, Angular会提示错误“类型无法引用”或“未定义属性”。这是因为NgForOf指令无法自动推断联合类型的成员类型。
解决此问题的一种方法是使用类型谓词(Type Predicate)来告诉Angular每个数组元素的确切类型。 例如:
interface Animal {
type: 'dog' | 'cat';
name: string;
}
@Component({
selector: 'app-animal-list',
template: `
{{ animal.name }} - {{ animal.type }}
`
})
export class AnimalListComponent {
animals: Animal[] = [
{ type: 'dog', name: 'Buddy' },
{ type: 'cat', name: 'Fluffy' },
{ type: 'dog', name: 'Charlie' }
];
isDog(animal: Animal): animal is { type: 'dog', name: string } {
return animal.type === 'dog';
}
}
在以上代码中,我们使用了一个名为isDog的类型谓词来判断当前动物是否为狗类型。 然后我们将其应用于NgForOf指令中,以告诉Angular该数组元素的确切类型。此时,Angular可以正确推断出成员类型,从而正确渲染列表。