Angular 成角排列的水果。把每个水果都放进去'；她自己的名单

用例=将每个水果放入正确的列表中。 最好的方法是什么

我知道我可以将列表过滤到每个水果的数组中，然后创建列表。然而，我试图不这样做；因此，当水果数组更新时，每个列表也会自动更新。下面的说法显然是不正确的

 fruits = [
  {type: 'apple', id: '1'},
  {type: 'apple', id: '2'},
  {type: 'apple', id: '3'},
  {type: 'orange', id: '4'},
  {type: 'orange', id: '5'},
  {type: 'banana', id: '6'},
  {type: 'banana', id: '7'},
 ];

 <ng-container *ngFor="let fruit of fruits">
    <ul>
        <li *ngIf="fruit.type === 'apple'">{{ fruit.type }}</li>
    </ul>

    <ul>
        <li *ngIf="fruit.type === 'orange'">{{ fruit.type }}</li>
    </ul>

    <ul>
        <li *ngIf="fruit.type === 'banana'">{{ fruit.type }}</li>
    </ul>
</ng-container>

fruits=[
{type:'apple'，id:'1'}，
{type:'apple'，id:'2'}，
{type:'apple'，id:'3'}，
{type:'orange'，id:'4'}，
{type:'orange'，id:'5'}，
{type:'banana'，id:'6'}，
{type:'banana'，id:'7'}，
];

{{{fruit.type}


{{fruit.type}


{{fruit.type}

使用rxjs，您可以将数据放入主题中。根据所需的特定水果类型对其进行筛选，然后在模板中使用

async

管道获取所需的值

大致看起来是这样的

const fruits$=新主题([{
键入：“苹果”，
id:'1'
},
{
键入：“苹果”，
id:'2'
},
{
键入：“苹果”，
id:'3'
},
{
键入：“橙色”，
id:'4'
},
{
键入：“橙色”，
id:'5'
},
{
类型：'香蕉'，
id:'6'
},
{
类型：'香蕉'，
id:'7'
},
]);
const apples$=fruits$.pipe（过滤器（fruit=>fruit.type==“apple”）；
const oranges$=fruits$.pipe（过滤器（fruit=>fruit.type==“orange”）；
const香蕉$=水果$.pipe（过滤器（水果=>水果.type==“香蕉”）

{{apple.type}


{{orange.type}


{{banana.type}
使用rxjs，您可以将数据放入主题中。根据所需的特定水果类型对其进行筛选，然后在模板中使用
async
管道获取所需的值

大致看起来是这样的


const fruits$=新主题([{
键入：“苹果”，
id:'1'
},
{
键入：“苹果”，
id:'2'
},
{
键入：“苹果”，
id:'3'
},
{
键入：“橙色”，
id:'4'
},
{
键入：“橙色”，
id:'5'
},
{
类型：'香蕉'，
id:'6'
},
{
类型：'香蕉'，
id:'7'
},
]);
const apples$=fruits$.pipe（过滤器（fruit=>fruit.type==“apple”）；
const oranges$=fruits$.pipe（过滤器（fruit=>fruit.type==“orange”）；
const香蕉$=水果$.pipe（过滤器（水果=>水果.type==“香蕉”）

{{apple.type}


{{orange.type}


{{banana.type}
我想最简单的解决方案是使用角管：

<h2>Oranges</h2>
<ul *ngFor="let fruit of fruits | type:'orange'">
    <li>{{ fruit.id }}</li>
</ul>
<h2>bananas</h2>
<ul *ngFor="let fruit of fruits | type:'banana'">
    <li>{{ fruit.id }}</li>
</ul>
<h2>apples</h2>
<ul *ngFor="let fruit of fruits | type:'apple'">
    <li>{{ fruit.id }}</li>
</ul>

橙子

{{fruit.id}

香蕉

{{fruit.id}

苹果

{{fruit.id}


完整示例：
我想最简单的解决方案是使用有角度的管道：

<h2>Oranges</h2>
<ul *ngFor="let fruit of fruits | type:'orange'">
    <li>{{ fruit.id }}</li>
</ul>
<h2>bananas</h2>
<ul *ngFor="let fruit of fruits | type:'banana'">
    <li>{{ fruit.id }}</li>
</ul>
<h2>apples</h2>
<ul *ngFor="let fruit of fruits | type:'apple'">
    <li>{{ fruit.id }}</li>
</ul>

橙子

{{fruit.id}

香蕉

{{fruit.id}

苹果

{{fruit.id}


完整示例：
水果=[
“苹果”，
“橙色”，
“香蕉”
];
结果1=[
{type:'apple'，id:'1'}，
{type:'apple'，id:'2'}，
{type:'apple'，id:'3'}，
{type:'orange'，id:'4'}，
{type:'orange'，id:'5'}，
{type:'banana'，id:'6'}，
{type:'banana'，id:'7'}，
];

{{{fruit.type}


我希望它能帮助您。
fruits=[
“苹果”，
“橙色”，
“香蕉”
];
结果1=[
{type:'apple'，id:'1'}，
{type:'apple'，id:'2'}，
{type:'apple'，id:'3'}，
{type:'orange'，id:'4'}，
{type:'orange'，id:'5'}，
{type:'banana'，id:'6'}，
{type:'banana'，id:'7'}，
];

{{{fruit.type}


我希望它能帮助你。
我会使用
地图
或
记录
。并计算数组中更改的键。（keyvalue管道也可以工作，但不纯净）
{'apple'：[1,2,3]，'orange'：[4,5]，'banana'：[6,7]}
。我会使用
地图
或
记录
。并计算数组中更改的键。（keyvalue管道也可以工作，但不纯净）
{'apple'：[1,2,3]，'orange'：[4,5]，'banana'：[6,7]}
。我认为把它包装成一个主题有点过分。@enno.void为什么？在本例中，只要$subject发生更改，所有其他值都会自动更新。这是Angular中相当标准的反应式编程。然后，它还可以与onPush更改检测一起使用，以获得更好的性能。我认为将其包装成主题有点过火。@enno.void为什么？在本例中，只要$subject发生更改，所有其他值都会自动更新。这是Angular中相当标准的反应式编程。然后，它可以与onPush更改检测一起使用，以获得更好的性能。这也是我所做的，但它是3个循环。我想没有别的办法了，是吗？我也是这么做的，但是有3个循环。我想没有别的办法了，是吗？