Question

我有一个Angular 2应用程序，我想在其中列出数据中的所有位置（我通过服务插入）。

在我父母的内部，我打算用* ngFor列出它们：

<ul *ngFor="let location in myservice.locations"></ul>

首先，这可能吗？该组件将对每个位置重复一次，并且看起来与数据相同。

我只是不确定从哪里开始。如果我的服务收到4个位置对象，每个对象都有名称和日期数据，该如何处理？

我在想我的位置（子级）组件看起来像这样吗？

...
export class locationComponent implements OnInit{
    constructor(private _myserviceService: MyserviceService) {
  }
obj;
ngOnInit(){
var locationname = ; 
var locationdate = ;
    let observable = this._myserviceService.getLocations();
     observable.subscribe(data => {
     this.obj = data
  })}

html类似于：

{{location.locationname}}
{{location.locationdate}}

主要我的问题是，如何确保构造位置组件，以便可以将其与多个数据对象一起使用，并且可以遍历它们？

谢谢！！让我知道是否可以澄清。

Answer 1

Take a look at this。我认为这就是您想要的。

我正在通过

  [{
    id: 'location 1'
  },{
    id: 'location 2'
  }]

使用*ngFor循环到子组件，在该子组件中可以按照组件呈现每个对象。

Answer 2

首先，从端点接收的数据将存储在this.obj中（代码：this.obj = data），然后可以在您的html中

<ul *ngFor="let location in obj">
  <li>{{location.locationname}}</li>
  <li>{{location.locationdate}}</li>
</ul>

将在每个位置显示两行

角度-如何重复使用不同数据的组件？

2 个答案: