Question

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

  <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>

，并且取决于我如何修改对可观察对象的订阅，这取决于天气，是否可以看到数组子数组的对象。在此示例中，c.mutualFriends[name]是具有其他信息的子数组。 mutualFriends是一个对象数组（下面是一个示例）。

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

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

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

以这种方式获取值时，将列出c.mutualFriends[lastNames]中的字符串数组。以这种方式订阅了可观察对象之后：

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'。我希望这是足够的细节。谢谢您的帮助！

Answer 1

您需要调用subscribe()方法。由于subscribe()方法用于激活可观察值并通过可观察值监听发出的值。

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();
         })
     );

Answer 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>

您必须遍历数组并显示所需的婴儿车

Answer 3

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

尝试使用：

c.mutualFriends [index] .lastNames

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

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

Answer 4

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

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

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

4 个答案: