角度4：如何使用角度4获取和显示多个数据

阿查亚

我在获取角度数据时遇到问题。

HTML：

<div class='col-md-6'>
  <div class='side-panel' style="margin-bottom: 20px;">
    <div class='headTxt'>
      <h5 *ngFor="let items of menuList">{{items.txt}}</h5>
      <div *ngFor="let items of menuList">{{items.item}}</div>
    </div>
  </div>
</div>

打字稿：

export class FoodItemsComponent implements OnInit {
  menuList;
  constructor() {
    this.menuList = [
      {txt:'Briyani',item:"chicken briyani"},
      {txt:'Indian veg rice'},
      {txt:'Rice & noodles'}, 
      {txt:'grill & shawarma'}, 
      {txt:'tandoori'}, 
      {txt:'chicken starter'}, 
      {txt:'egg dishes'},
      {txt:'Briyani'}, 
      {txt:'Briyani'},
    ];
   }

  ngOnInit() {
  }

}

我正在尝试获得这种类型的输出：

但是，越来越像这样。请帮忙。

提前致谢。

Suvethan Nantha |

您可以通过以下代码来实现。

首先创建一个自定义管道，如下所示

import { Pipe } from '@angular/core';

@Pipe({name: 'groupBy'})
export class GroupByPipe implements PipeTransform {
  transform(value: Array<any>, field: string): Array<any> {
    const groupedObj = value.reduce((prev, cur)=> {
      if(!prev[cur[field]]) {
        prev[cur[field]] = [cur];
      } else {
        prev[cur[field]].push(cur);
      }
      return prev;
    }, {});
    return Object.keys(groupedObj).map(key => return { key, value: groupedObj[key] });
  }
}

然后在您的组件中添加以下内容，您必须在其中注入先前创建的自定义管道。

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Menu</h2>
      <div *ngFor="let menu of menuList | groupBy:'txt' ">
       <span style="font-weight: bold;">{{ menu.key }} </span> 
       <div *ngFor="let val of menu.value">{{ val }}</div>
      </div>
    </div>
  `,
  pipes: [GroupByPipe],
  directives: []
})

我对JSON数组进行了一些修改，以支持您在问题中提到的格式

this.menuList=[ {txt:'Briyani',item:"chicken briyani"},
      {txt:'Indian rice',item:"veg"},
      {txt:'Rice & noodles',item:"veg"}, 
      {txt:'grill & shawarma',item:"fish"}, 
      {txt:'tandoori',item:"chicken"}, 
      {txt:'starter',item:"chicken"}, 
      {txt:'dishes',item:"egg"},
      {txt:'Briyani',item:"mutton briyani"}, 
      {txt:'Briyani',item:"fish briyani"}];

如果您有这样的JSON

    this.menuList=[{
    "txt": "Briyani",
    "item": [{
        "type": "Chicken Briyani",
        "price": "180",
        "img": "assets/images/3.JPG"
    }, {
        "type": "Mutton Briyani",
        "price": "180",
        "img": "assets/images/3.JPG"
    }, {
        "type": "Prawn Briyani",
        "price": "180",
        "img": "assets/images/3.JPG"
    }]
}, {
    "txt": "Indian Rice",
    "item": [{
        "type": "Chicken Rice",
        "price": "180",
        "img": "assets/images/3.JPG"
    }, {
        "type": "Fish Rice",
        "price": "180",
        "img": "assets/images/3.JPG"
    }]
}];

那么您可以按照以下代码完成任务。

<div *ngFor="let menu of menuList">
  <h5>{{menu.txt}}</h5>
  <div *ngFor="let it of menu.item">
    <span>{{it.type}}</span>
    <span>{{it.price}}</span>
  </div>
</div>

柱塞示例

我希望这能解决您的问题。如果有任何建议或疑问，请通知我。谢谢。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。