Angular-如何重复具有不同数据的组件？答案

【问题标题】：Angular- How do I repeat a component with different data?Angular-如何重复具有不同数据的组件？
【发布时间】：2018-08-19 18:17:32
【问题描述】：

我有一个 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}}

主要是我的问题是，我如何确保构建我的位置组件，以便它可以与多个数据对象重用并且我可以循环它们？

谢谢！！如果我能澄清一下，请告诉我。

【问题讨论】：

我认为您可以使用@Input 将数据传递给子组件。我不明白主要问题是什么。您介意创建一个 stackblitz 示例并与我们分享吗

标签： javascript html angular

【解决方案1】：

Take a look at this。我想这就是你要找的。

我路过

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

使用*ngFor 循环到子组件，每个对象都可以根据组件进行渲染。

【讨论】：

太棒了！我知道这将如何工作。我的服务出现错误。我在导入 'of/observable' 时遇到问题并收到此消息： Module '"/filepath/node_modules/rxjs/Rx"' has no export member 'of' 我错过了什么吗？谢谢
没关系！找到答案：stackoverflow.com/questions/50230927/…
@LaurenAH 干杯！ :)

【解决方案2】：

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

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

每个位置显示两行

【讨论】：