[英]How can I pass pre generated array to component in template in angular?
I have an items array and loop it into a component. 我有一个项目数组,并将其循环到一个组件中。 Display items props separately:
单独显示道具:
Items Array 项目数组
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
}];
Component 零件
<div class="all-items">
<app-items [item]="items"></app-items>
</div>
<div class="specific-items">
<app-items [item]="items"></app-items>
</div>
HTML HTML
<div class="title">List</div>
<p>Name: {{item.name}}</p>
<p>Prop1: {{item.prop1}}</p>
<p>Prop2: {{item.prop2}}</p>
I want to display all items under the .all-items div, but display item which has boolval=true prop under the .specific-items div. 我想在.all-items div下显示所有项目,但在.specific-items div下显示具有boolval = true道具的项目 。 Generated HTML for all-items looks like the following:
为所有项目生成的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>
I want to display specific items like this; 我想显示这样的特定项目;
<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>
How can I generate a specific array in template like this [item]="items.filter(x => x.boolval=== true)" and pass it to component? 我该如何在模板中生成特定数组,例如[item] =“ items.filter(x => x.boolval === true)” ,并将其传递给组件? So I want generate a specific array in template and then send it to component
所以我想在模板中生成一个特定的数组,然后将其发送到组件
You can create a pipe to filter the array. 您可以创建管道以过滤阵列。
Here is the final solution 这是最终的解决方案
app-items.pipe.ts
@Pipe({
name: 'appItemsFilter'
})
export class AppItemsFilter implements PipeTransform {
transform(items) {
return items.filter(x => x.boolval);
}
}
And you can simply use it as following 您可以按以下方式简单地使用它
<div class="all-items">
<app-items [items]="items"></app-items>
</div>
<div class="specific-items">
<app-items [items]="items | appItemsFilter"></app-items>
</div>
Also, this pipe is pure which means angular will not call tranform
method unless items
array reference change (operations like push
, pop
won't trigger change detection) So, performance will be a lot better than calling methods from template. 而且,此管道是纯管道,这意味着除非
items
数组引用发生更改(除非执行诸如push
, pop
这样的操作都不会触发更改检测),否则angular不会调用tranform
方法。因此,性能将比从模板调用方法好得多。
In angular, you can try below- 在角度方面,您可以尝试以下操作-
<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>
Added the code in stackbliz 在stackbliz中添加了代码
modified the HTML structure little and added some conditions. 稍微修改了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>
you can pass pipe direclty to the array to *ngFor 您可以将管道直通传递给数组到* ngFor
@Pipe({
name: 'itemsFilter'
})
export class AppItemsFilter implements PipeTransform {
transform(items) {
return items.filter(x => x.boolval);
}
}
in your html 在你的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.