如何将预先生成的数组按角度传递给模板中的组件？

Question

我有一个项目数组，并将其循环到一个组件中。 单独显示道具：

项目数组

const items = [
    {
        'name': 'item1', 
        'prop1': 'text1', 
        'prop2': 'text2',
        'boolval': true
    },
    {
        'name': 'item2', 
        'prop1': 'text1', 
        'prop2': 'text2',
        'boolval': false
    },
    {
        'name': 'item3', 
        'prop1': 'text1', 
        'prop2': 'text2',
        'boolval': true
    }];

零件

<div class="all-items">
    <app-items [item]="items"></app-items>
</div>

<div class="specific-items">
    <app-items [item]="items"></app-items>
</div>

HTML

<div class="title">List</div>
<p>Name: {{item.name}}</p>
<p>Prop1: {{item.prop1}}</p>
<p>Prop2: {{item.prop2}}</p>

我想在.all-items div下显示所有项目，但在.specific-items div下显示具有boolval = true道具的项目 。 为所有项目生成的HTML如下所示：

<div class="all-items">
    <app-items>
        <div class="title">List</div>
        <p>Name: item1</p>
        <p>Prop1: text1</p>
        <p>Prop2: text2</p>
    </app-items>
    <app-items>
        <div class="title">List</div>
        <p>Name: item2</p>
        <p>Prop1: text1</p>
        <p>Prop2: text2</p>
    </app-items>
    <app-items>
        <div class="title">List</div>
        <p>Name: item3</p>
        <p>Prop1: text1</p>
        <p>Prop2: text2</p>
    </app-items>
</div>

我想显示这样的特定项目；

<div class="specific-items">
    <app-items [item]="items.filter(x => x.boolval=== true)"></app-items>
</div>

<div class="specific-items">
    <app-items>
        <div class="title">List</div>
        <p>Name: item1</p>
        <p>Prop1: text1</p>
        <p>Prop2: text2</p>

        <p>Name: item3</p>
        <p>Prop1: text1</p>
        <p>Prop2: text2</p>
    </app-items>
</div>

我该如何在模板中生成特定数组，例如[item] =“ items.filter（x => x.boolval === true）” ，并将其传递给组件？ 所以我想在模板中生成一个特定的数组，然后将其发送到组件

Answer 1

您可以创建管道以过滤阵列。

这是最终的解决方案

app-items.pipe.ts

@Pipe({
  name: 'appItemsFilter'
})
export class AppItemsFilter implements PipeTransform {

  transform(items) {
    return items.filter(x => x.boolval);
  }
}

您可以按以下方式简单地使用它

<div class="all-items">
  <app-items [items]="items"></app-items>
</div>

<div class="specific-items">
  <app-items [items]="items | appItemsFilter"></app-items>
</div>

而且，此管道是纯管道，这意味着除非items数组引用发生更改（除非执行诸如push ， pop这样的操作都不会触发更改检测），否则angular不会调用tranform方法。因此，性能将比从模板调用方法好得多。

Answer 2

在角度方面，您可以尝试以下操作-

    <div class="all-items">
    <app-items *ngFor="let item of items;let i= index">
        <div class="title">List</div>
      <ng-container *ngIf="item.boolval">
        <p>Name: {{item?.name}}</p>
        <p>Prop1: {{item?.prop1}}</p>
        <p>Prop2: {{item?.prop2}}</p>
      </ng-container>
    </app-items>
  </div>

Answer 3

在stackbliz中添加了代码

稍微修改了HTML结构并添加了一些条件。

<div class="all-items">
    <app-items [items]="items" case="1"></app-items>
</div>

<div class="specific-items">
    <app-items [items]="items" case="2"></app-items>
</div>

<div class="title">List</div>
<div *ngFor="let item of items">
    <div *ngIf="case == 1 || (case == 2 && item.boolval == true)">
        <p>Name: {{item.name}}</p>
        <p>Prop1: {{item.prop1}}</p>
        <p>Prop2: {{item.prop2}}</p>
    </div>
</div>

Answer 4

您可以将管道直通传递给数组到* ngFor

@Pipe({
 name: 'itemsFilter'
})
export class AppItemsFilter implements PipeTransform {

  transform(items) {
   return items.filter(x => x.boolval);
  }
}

在你的HTML

  <div class="specific-items">
  <app-items>
   <div class="title">List</div>
   <ng-container *ngFor="let item of items | itemsFilter">
      <p>Name: {{item?.name}}</p>
      <p>Prop1: {{item?.prop1}}</p>
      <p>Prop2: {{item?.prop2}}</p>
    <ng-container>
  </app-items>
</div>