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

Posted 2023-02-23

【中文标题】如何以角度将预先生成的数组传递给模板中的组件？

【英文标题】：How can I pass pre generated array to component in template in angular?

【发布时间】：2019-05-27 23:26:42

【问题描述】：

我有一个 items 数组并将其循环到一个组件中。单独展示物品道具：

项目数组

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-itemsboolval=true 属性的项目/strong> 分区。为所有项目生成的 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)" 这样的模板中生成特定数组并将其传递给组件？所以我想在模板中生成一个特定的数组，然后将它发送给组件

【问题讨论】：

您希望.map(x => x.bool === true) 做什么？这将返回一个 新的布尔数组 您可能想要 .filter 代替（尽管angular.io/guide/pipes，您应该为此使用Pipe）。也就是说，您应该使用组件 getter，或者先生成数组，如果函数（或 getter）执行繁重的操作（如数组映射），将函数（或 getter）绑定到角度组件并不是一个好习惯。

对不起，我拼错了，我已将地图更正为过滤器

x.bool 有错字吗？您的数组项有一个名为 boolval 的字段。

你说得对，我已经更正了，谢谢

【参考方案1】：

您可以创建一个管道来过滤数组。

这里是the final solution

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>

另外，这个管道是纯的，这意味着 Angular 不会调用 tranform 方法，除非 items 数组引用更改（push、pop 等操作不会触发更改检测）所以，性能会很多比从模板调用方法更好。

【参考方案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>

【参考方案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>

【参考方案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>