如何將預先生成的數組按角度傳遞給模板中的組件？

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>