在 Angular 中读取对象内的数组答案

【问题标题】：Reading an Array inside an Object within Angular在 Angular 中读取对象内的数组
【发布时间】：2018-10-26 14:17:49
【问题描述】：

也许有人可以帮助我。我在一个对象中有一个数组。我可以从对象中得到Array(Articles)。那不是我的问题。我的问题是我现在在 Angular 中使用 *ngFor 来阅读文章列表，但没有 id。生成IDs。

如何让 Angular 从中读取？

我可以通过放入文章[0] 或文章1 来读取数组，但我需要获取所有文章并且单独指定是行不通的。任何帮助都会很棒！多谢你们。

TS 页面

blog: string[];
blogs: string[] = [];

ngOnInit() {
        this.getNewsData().subscribe((blog) => {
            this.blogs.push(blog);
            console.log(blog.articles);
        });

component.html 文件

<mat-card class="example-card" *ngFor="let blog of blogs.articles">
        <mat-card-header>
          <div mat-card-avatar class="example-header-image"></div>
          <mat-card-title>{{ blog.title }}</mat-card-title>
          <mat-card-subtitle>{{ blog.author }}</mat-card-subtitle>
        </mat-card-header>
        <img mat-card-image src="{{ blog.urlToImage }}" alt="Photo of a Shiba Inu">
        <mat-card-content>
          <p>
            {{ blog.titles }}
          </p>
        </mat-card-content>
        <mat-card-actions>
          <button mat-button>LIKE</button>
          <button mat-button>SHARE</button>
        </mat-card-actions>
</mat-card>

【问题讨论】：

<p *ngFor="let x of yourObject.articles">{{x.title}}</p> 有什么问题？
@bugs 什么都没有：p
哦，伙计，如果这么简单，我会踢自己的。我会重新检查我的代码。
还是想不通。我已经用 component.ts 文件代码更新了问题。这样你就可以看到我的对象是什么。
@KevinSummersill 您添加的内容并没有真正提供更多上下文。 blogs 的最终形状是什么？你的 HTML 是什么样的？

标签： javascript angular api get rxjs

【解决方案1】：

问题是您将从getNewsData() 获得的对象推入一个数组，但这并没有多大意义，因为您只关心该对象。

将您的代码更改为：

blogs;

ngOnInit() {
  this.getNewsData().subscribe((blogs) => {
    this.blogs = blogs;
});

【讨论】：

你太棒了！！！！！！所以每次我使用 push() 方法时，我都会让它进入一个数组？我知道将其发布到 stackoverflow 是值得的。感谢您让我的一天变得美好。
是的，array.push(thing) 将事物添加到数组中。很高兴它有帮助:)

【解决方案2】：

不知道为什么你需要一个 id 来循环使用 *ngFor。它应该只遍历数组中的每一篇文章并显示它。如果要为数组中的每个属性指定一个 id，请生成一个与索引连接的字符串。

【讨论】：

是的，这就是为什么这让我发疯的原因。我不认为我需要一个 id 来读取数组中的每个值。