使用 *ngFor Angular v5 访问数组答案

【问题标题】：Access array with *ngFor Angular v5使用 *ngFor Angular v5 访问数组
【发布时间】：2018-01-11 11:39:31
【问题描述】：

我在 Firebase 中有一些 JSON 数据，我正在尝试在 Angular v5 中使用 *ngFor 循环数据。

对象如下所示：

{
    "events": [
        {
            "Event-time": "09:30",
            "Event-name": "Morning Session",
            "Location": "Alexander Room",
            "Speaker-image": "https://z4e3q7e996-flywheel.netdna-ssl.com/wp-content/uploads/2017/07/TeamPhotosIan.png",
            "Speaker-name": "Ian Broom",
            "Speaker-title": "CEO & Founder"
        },
        {
            "Event-time": "11:30",
            "Event-name": "Morning Session II",
            "Location": "Coffee Room",
            "Speaker-image": "https://z4e3q7e996-flywheel.netdna-ssl.com/wp-content/uploads/2012/07/TeamPhotosben.png",
            "Speaker-name": "Ben Wynne-Simmons",
            "Speaker-title": "Head of Growth & Marketing"
        }
   ]
}

这是我的 events-list.component:

export class EventsListComponent implements OnInit {
    eventsObservable: Observable<any[]>;

    constructor(private db: AngularFireDatabase) { }

    ngOnInit() {
        this.eventsObservable = this.getEvents('/events');
    }

    getEvents(listPath): Observable<any[]> {
        return this.db.list(listPath).valueChanges();
    }
}

我正在尝试像这样循环：

<ul>
    <li *ngFor="let event of eventsObservable | async">
        <p>{{event.Event-name}}</p>
    </li>
</ul>

打印出来的是NaN。

我不知道如何访问和显示数据。

请帮忙！谢谢！

【问题讨论】：

标签： javascript arrays angular object ngfor

【解决方案1】：

问题是访问包含符号- 的字段。

它被解释为数学减法（由于 event.Event 和 name 都不是数字，event.Event - name 给出 NaN (NotANumber)。

要访问名称中包含特殊字符的此类字段，您必须使用括号表示法：

<p>{{event["Event-name"]}}</p>

另外，正如其他答案所说，您必须直接迭代您的数组。我不太清楚你是如何在你的答案中得到你观察到的。如果你从大对象中得到了一个 Observable，那么你应该将你的 observable .map 放到它的 events 字段中。

这会给你另一个 observable，你应该迭代后者。

【讨论】：

当然！！！我怎么看不到呢？非常感谢，它工作得很好！澄清一下，eventsObservable 保持原样。
也感谢您的澄清，我不是 Firebase 用户。很高兴它现在可以工作了！
我愿意接受改进我的代码的建议。非常感谢您的帮助！

【解决方案2】：

你需要访问 events，它是 eventsObservable 对象中的一个数组

<div *ngFor="let event of eventsObservable.events | async">
        <p>{{event.Event-name}}</p>
 </div>

【讨论】：

感谢您的回答，但不幸的是，这不起作用。