Tengo una serie de objetos como este:

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

Lo leí del servicio en mi componente:

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

En mi html, iteraré sobre esta matriz, pero dentro del ciclo también me gustaría iterar sobre los detalles. Probé algunos enfoques, incluido el siguiente, pero realmente no entiendo cómo funciona aquí. ¿Cómo abordarlo correctamente?

<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
Malvinka 5 feb. 2019 a las 19:36

2 respuestas

La mejor respuesta

$ generalmente tiene el sufijo después del nombre de una propiedad si esa propiedad contiene un valor observable. Esto se hace como una convención de nomenclatura como se indica en la Guía angular aquí :

Debido a que las aplicaciones angulares están escritas principalmente en TypeScript, normalmente sabrá cuándo una variable es observable. Aunque el marco angular no aplica una convención de nomenclatura para los observables, a menudo verá los observables nombrados con un signo "$" al final.

Esto puede resultar útil al escanear código y buscar valores observables. Además, si desea que una propiedad almacene el valor más reciente de un observable, puede ser conveniente usar simplemente el mismo nombre con o sin el "$".

Como ya eres subscribing para el Observable y el experience$ no será un Observable y en su lugar sería una matriz, deberías considerar nombrar la propiedad de manera diferente.

Pruebe esto sin $.

El li para obtener detalles tampoco está en el ul. Así que arréglelo haciendo lo siguiente:

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

También realice este cambio en su clase de componente:

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

Aquí hay un StackBlitz de muestra de trabajo para su ref.

2
SiddAjmera 5 feb. 2019 a las 16:47

Tiene un error tipográfico, simplemente elimine $ después de details. Además, no use $ para variables no observables, ya que esta convención de nomenclatura se usa generalmente para identificar observables.

<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
jo_va 5 feb. 2019 a las 16:41