时间戳

首页 > 解决方案 > 使用带有 or 运算符的接口

angular - 使用带有 or 运算符的接口

问题描述

假设我们有一个滑块组件，它有一个 Input 输入可以采用 Products 或 Teaser

public productsWithTeasers: (Product | Teaser)[];

这样做会在 vs 代码中产生错误

<div *ngFor="let product of productsWithTeasers"> {{ product.externalId }}</div>

Identifier 'externalId' is not defined. '<anonymous>' does not contain such a memberAngular

这样做的正确方法是什么？

注意：这两个对象不相似，所以在接口中使用扩展不是我想要的:)

标签： angulartypescriptvisual-studio-codeinterface

解决方案

尝试将一些额外的类型添加到您的productsWithTeasers. 它确实从我的 VS 代码中删除了错误。

productsWithTeasers: (Product | Teaser)[] | Product[] | Teaser[];

这样，数组可以是 Teaser 和 Products 的混合，或者仅包含 Teaser 或仅包含 Products。

这是一个最小的例子：https ://stackblitz.com/edit/angular-afcby5

html:

<div *ngFor="let prod of products">
  {{prod?.myProdAttribute}}
</div>

零件：

@Component({
  selector: 'button-overview-example',
  templateUrl: 'button-overview-example.html',
  styleUrls: ['button-overview-example.css'],
})
export class ButtonOverviewExample {
  products: (Product | Teaser)[] | Product[] | Teaser[] = [{myProdAttribute: 'asd'},{myTeaserAttribute: 'fgdfg'}];
}

export class Product {
  myProdAttribute: string;
}

export class Teaser {
  myTeaserAttribute: string;
}

推荐阅读