Angular 使用与或运算符的接口

假设我们有一个具有输入的滑块组件 输入可以是产品或摘要

publicproductswithtrister:（产品| trister）[]

这样做会在vs代码中出现错误

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

{{product.externalId}

未定义标识符“externalId”。'不包含此类代码

正确的方法是什么

注意：这两个对象不相似，因此使用扩展接口不是我想要的：）
尝试向您的
产品添加一些额外的类型。它确实从我的VS代码中删除了错误

productswithtrister:（Product | trister）[]| Product[]| trister[]

这样，数组可以是摘要和产品的混合体，或者只包含摘要或产品

下面是一个简单的例子：

html:

您不想将其声明为
productswithtrister:Product[]| trister[]？@DaggeJ我想我可以，但结果是一样的……好吧，也许把它包装在一个接口中会有帮助
ProductsWithStraters:ProductorTaser[]
-
interface ProductorTaser{data:Product | Strater}
这两种类型都有
externalId
属性吗？@Mackelito好的……这听起来正是您的问题所在。您将联合类型定义为两个，但不能保证该联合类型中的项具有
externalId
成员。因此，尝试使用可能不存在的属性时，编译器会抛出一个错误。当前使用So null的情况永远不会发生：）好的，但是添加额外类型有效吗？这就是我的主要观点：）@Mackelito你找到另一个解决方案了吗？不是真的。。我们删除了它，因为它不会影响应用程序。。我们稍后再看一看：）
<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;
}