列出视图中的视图组件,它将接受任何数据源

Question

我想创建如下的公共列表组件

<ul>
  <li *ngFor="let item of items">{{item.text}}</li>
</ul>

带接口

export interface Items{
id:string
text:string
}

并在component.ts

@input items:any

现在我想重用上面的组件与任何数据源.

例如,

<app-list-view [items]="ProductList"></app-list-view>

和产品包含.

this.ProductList =[PRODUCTSITEMS...]
    export interface Products{
    produceId
    productText
    }

也许 <app-list-view [items]="OrderList"></app-list-view>

this.OrderList=[ORDERITEMS...]
export interface Orders{
    orderId
    orderText
    }

我们怎样才能在这里使用typescript泛型或类似的东西？我不想使用map函数在ProductList和OrderList上再创建2个额外的属性.

什么是实现上述功能的最佳方式.

Answer 1

好问题；您希望使该组件可重用于不同类型的列表，这是件好事。

不幸的是，泛型不会帮助您了解代码的工作方式，它只会帮助您在编写代码时跟踪类型。但是，您想要做的事情可以通过额外的输入来实现。

如果这个键的名称也是一个输入，而不是写{{item.text}}在模板中并一成不变，该怎么办？我们就这样称呼它吧。那么模板将如下所示：.textkey

{{item[key]}}

现在我们只需要key在类中进行输入即可。我们可以给它一个默认值，text这样，如果您不给出键的名称，它就会回退到item.text.

@Input() key: string = 'text'

现在您可以像这样使用您的组件：

<app-list-view
  [items]="productList"
  [key]="'productText'"
></app-list-view>

<app-list-view
  [items]="ordersList"
  [key]="'orderText'"
></app-list-view>

在这两种情况下，都会选择正确的内容：在第一种情况下，它与“写作”相同{{item.productText}}，而在第二种情况下，它就像“说” {{item.orderText}}。