перебрать параметр массива в объекте - PullRequest
Новая
       22

перебрать параметр массива в объекте

0 голосов
/ 05 февраля 2019

У меня есть массив объектов, подобных этому: 

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

Ответы [ 2 ]

0 голосов
/ 05 февраля 2019

У вас есть опечатка, просто удалите $ после 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>
0 голосов
/ 05 февраля 2019

$ обычно ставится после суффикса имени свойства, если это свойство содержит наблюдаемое значение.Это делается в соответствии с соглашением об именах, как указано в Angular Guide здесь :

Поскольку приложения Angular в основном написаны на TypeScript, вы обычно будете знать, когдапеременная является наблюдаемой.Хотя среда Angular не предписывает соглашение об именовании для наблюдаемых, вы часто будете видеть наблюдаемые, названные со знаком «$».

Это может быть полезно при сканировании кода и поиске наблюдаемых значений.Кроме того, если вы хотите, чтобы свойство сохраняло самое последнее значение из наблюдаемой, может быть удобно просто использовать одно и то же имя с или без «$».

Поскольку вы уже 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 для вашей ссылки.

...