如何订阅 Observable 并从对象中提取值数组答案

【问题标题】：How to subscribe to an Observable and extract from an Object an Array of values如何订阅 Observable 并从对象中提取值数组
【发布时间】：2019-07-04 02:00:46
【问题描述】：

我有一个看起来像这样的模板。

  <ng-container *ngIf="contactList$ | async as contactList">
    <ion-virtual-scroll [items]="contactList">
      <ion-item *virtualItem="let c" (click)="openProfile(c)">
        <ion-thumbnail slot="start">
          <img [src]="c.profilePicture" />
        </ion-thumbnail>
        <ion-label position="stacked">{{ c.lastNames }}, {{ c.firstNames }}</ion-label>
        <ion-label position="stacked">{{ c.mutualFriends[lastNames] }}</ion-label>
      </ion-item>
    </ion-virtual-scroll>
  </ng-container>

根据我如何修改对 observable 的订阅取决于天气与否，我可以看到数组的子数组的对象。在此示例中，c.mutualFriends[name] 是一个包含附加信息的子数组。 mutualFriends 是一个对象数组（示例如下）。

现在在我之前做的组件中：

    this.contactService.getContacts().subscribe((users: Contact[]): void => {
      this.contactList = users;
    });

旁注：我知道通过这种方式，您需要更改上面的模板，以免出错。在这种情况下删除<ng-container>

以这种方式获取值时，c.mutualFriends[lastNames] 中的字符串数组将被列出。以这种方式订阅 observable 后：

this.contactList$ = this.contactService.getContacts();

在模板内，c.mutualFriends[lastNames] 没有列出任何内容。

如何从下面的示例中进行渲染：

contact = {
  lastNames: 'Garcia Smith',
  firstNames: 'Gabriel',
  mutualFriends: [
    {
      lastNames: 'Llull',
      firstNames: 'Ramon',
      mutualFriends[],
    },
    {
      lastNames: 'Pereira dos Santos',
      firstNames: 'Joāo Maria',
      mutualFriends: [],
    }
  ],
};

在我的模板中，我希望看到'Llull, Pereira dos Santos'，就像第一种订阅方式一样。我希望这是足够的细节。感谢您的帮助！

【问题讨论】：

是否显示其他信息？即：c.profilePicture 有输出吗？如果您尝试将整个响应输出为{{contactList | json}} 或{{c | json}}，您会得到一些东西还是一个空对象？
是的，所有其他信息都显示了

标签： angular rxjs

【解决方案1】：

您需要调用subscribe() 方法。由于subscribe() 方法用于激活 observable 并监听 observable 发出的值。

this.contactList$ = this.contactService.getContacts()
    .subscribe((users: Contact[]) => {
      this.contactList = users;
    });

此外，您可以选择使用pipe() 运算符。 pipe() 运算符用于链接可观察的运算符

this.contactList$ = this.contactService.getContacts()
    .pipe(
         map((res) => {      
             this.contactList = res.json();
         })
     );

【讨论】：

感谢您的意见。我认为我可以用更简单的方法来做，因为它只是更少的行，但是，有时就是无法绕过它。谢谢！

【解决方案2】：

尝试ngFor循环遍历数组

<ng-container *ngIf="contactList$ | async as contactList">
    <ion-virtual-scroll [items]="contactList">
      <ion-item *virtualItem="let c" (click)="openProfile(c)">
        <ion-thumbnail slot="start">
          <img [src]="c.profilePicture" />
        </ion-thumbnail>
        <ion-label position="stacked">{{ c.lastNames }}, {{ c.firstNames }}</ion-label>
        <ion-label position="stacked" *ngFor="let mutualFriend of c.mutualFriends">{{ mutualFriend.lastNames }}</ion-label>
      </ion-item>
    </ion-virtual-scroll>
  </ng-container>

你必须遍历数组并显示你想要的婴儿车

【讨论】：

感谢这个作品，我想我可以做这样的事情，但我希望绕过 another for loop inside a loop让它变得更难阅读。

【解决方案3】：

您需要从对象数组“mutualFriends”中提取值“lastNames”以获取更多详细信息，

From an array of objects, extract value of a property as array

【讨论】：

【解决方案4】：

mutualFriend 是一个数组，因此您需要使用索引而不是字符串来访问元素。

尝试使用：

c.mutualFriends[index].lastNames

其中 index 是循环索引或使用静态值作为 0,1...

或者您需要对共同好友运行循环以访问共同好友的所有元素。

【讨论】：