时间戳

首页 > 解决方案 > 遍历对象中的数组参数

angular - 遍历对象中的数组参数

问题描述

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

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

标签： angularobservablengfor

解决方案

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

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

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

由于您已经subscribing到了 Observable 并且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
    )
  }
}

这是您参考的工作示例 StackBlitz。

推荐阅读