遍历对象中的数组参数

Question

我有一个这样的对象数组：

[{
  position: "Software Developer",
  company: "Big company",
  details: [
    "task1","task2,"task3"
  ]
},
{
  position: "Software Developer",
  company: "Another Big company",
  details: [
    "task1a","task2a,"task3a"
  ]
}]

我从我的组件中的服务中读到了：

ngOnInit() {
    this.data.getExperience().subscribe(
      data => this.experience$ = data
    )
  }

在我的 html 中，我迭代了这个数组，但在循环中，我也想迭代细节。我尝试了几种方法，包括下面的方法，但我不太明白它是如何工作的。如何正确处理？

<li *ngFor='let experience of experience$'>
    <!--<a routerLink='/details/{{ user.id }}'>{{ user.name }}</a>-->
    <ul>
      <li class="position">{{ experience.position }}</li>
      <!--<li><a href='http://{{ user.website }}'>{{ user.website }}</a></li>-->
      <li class="company">{{ experience.company}}<span class="dates">  {{ experience.dates}}</span></li>
      <ul class="details" *ngFor='let d of experience.details$'></ul>
        <li>{{ d }}</li>
    </ul>
  </li>

Answer 1

$ 如果该属性包含 Observable 值，则通常在属性名称之后添加后缀。这是按照Angular Guide here 中所述的命名约定完成的：

因为 Angular 应用程序大多是用 TypeScript 编写的，所以您通常会知道变量何时是可观察的。尽管 Angular 框架不强制执行 observables 的命名约定，但您经常会看到 observables 以结尾的“$”符号命名。

这在扫描代码和寻找可观察值时很有用。此外，如果您希望一个属性存储来自 observable 的最新值，只需使用带有或不带“$”的相同名称会很方便。

由于您已经是 Observable 的 subscribing 并且 experience$ 不是 Observable 而是一个数组，因此您应该考虑以不同的方式命名该属性。

不带 $ 试试这个。

li 的详细信息也不在ul 中。因此，请执行以下操作来修复它：

<li *ngFor='let experience of experiences'>
  <!--<a routerLink='/details/{{ user.id }}'>{{ user.name }}</a>-->
  <ul>
    <li class="position">{{ experience.position }}</li>
    <!--<li><a href='http://{{ user.website }}'>{{ user.website }}</a></li>-->
    <li class="company">{{ experience.company}}<span class="dates">  {{ experience.dates}}</span></li>
    <ul class="details" *ngFor='let d of experience.details'>
      <li>{{ d }}</li>
    </ul>

  </ul>
</li>

在您的组件类中也进行此更改：

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  experiences: any[];

  constructor(private data: DataService) {}

  ngOnInit() {
    this.data.getExperience().subscribe(
      data => this.experiences = data
    )
  }
}

---

这里有一个Working Sample StackBlitz 供您参考。

Answer 2

您有一个错字，只需删除details 之后的$。此外，不要将$ 用于不可观察变量，因为这种命名约定通常用于标识可观察变量。

<li *ngFor='let experience of experience$'>
    <!--<a routerLink='/details/{{ user.id }}'>{{ user.name }}</a>-->
    <ul>
      <li class="position">{{ experience.position }}</li>
      <!--<li><a href='http://{{ user.website }}'>{{ user.website }}</a></li>-->
      <li class="company">{{ experience.company}}<span class="dates">  {{ experience.dates}}</span></li>
      <ul class="details" *ngFor='let d of experience.details'></ul>
        <li>{{ d }}</li>
    </ul>
  </li>