Как заставить массив отображать итерации своим дочерним элементам в Angular 7 - PullRequest
Новая
       4

Как заставить массив отображать итерации своим дочерним элементам в Angular 7

1 голос
/ 22 октября 2019

Я пытаюсь получить родительский и дочерний массив для отображения и отобразить его на ngFor . Я сталкиваюсь с проблемой, что дети не будут показывать во время ngFor

У меня есть служба, которая будет принимать данные с сервера. Эти данные примерно такие. 

"teaser" : [ {
"id" : "1234567",
"headline" : "Developer",
"text" : "Like Developer you will need ...",
"image" : {
  "altText" : "Code",
  "srcSet" : [ {
    "query" : "min-with: 960px",
    "path" : "randomPhoto.jpg"
  }, {
    "query" : "min-with: 320px",
    "path" : "randomPhoto.jpg"
  } ]
},
"link" : {
  "text" : "more",
  "titel" : "Job Description",
  "href" : "http://google.de",
  "target" : ""
},
"category" : [ "Job" ]
},

До сих пор я могу получить только teaser.text, но его дочерние элементы не отображаются в HTML, например: photo (path) и href with text.

Это мой код

Service

@Injectable({
  providedIn: 'root'
})
export class TeaserService {

  private baseUrl = "Here is the link which is getting the Json file";

  constructor(private http: HttpClient) {
  }

  getTeaserList(): Observable<any> {
    return this.http.get(`${this.baseUrl}`)
  }
}

Вот модель. 

  export class Teaser {
  id: number;
  headline: string;
  text: string;
  image: string;
  link: string;
  category: string;
}

Вот файл TS. 

export class AppComponent implements OnInit {
  public activeElement = 2;
  teasers: Observable<Teaser>;
  selectedTab = "Jobs";


  constructor(private teaserService: TeaserService) {}


  ngOnInit() {
    this.reloadData();
  }


  reloadData() {
    this.stages = this.stageService.getStageList();
    this.teaserService.getTeaserList().subscribe(getTeasers => {
      this.teasers = getTeasers.teaser;
    });
  }

Вот HTML. 

div class="row" >
  <div class="col-md-3 col-md-offset-2" *ngFor="let teaser of teasers;">
    <img alt="" class="w-100" src="../assets/images/teaser-01.jpg"/>
    <p>{{teaser.text}}</p>
    <a class="btn-more" href="#" >
      <i class="fa fa-angle-right"></i> More</a>
  </div>

</div>

1 Ответ

1 голос
/ 22 октября 2019

Учитывая структуру вашего объекта, teaser.image.srcSet является массивом, поэтому вы должны выполнить итерацию по этому массиву, например: 

div class="row" >
 <div class="col-md-3 col-md-offset-2" *ngFor="let teaser of teasers;">
   <img alt="" class="w-100" src="../assets/images/teaser-01.jpg"/>
   <p>{{teaser.text}}</p>

   <p *ngFor="let teaserImg of teaser.image.srcSet">Image path: {{ teaserImg.path }}</p>

   <a class="btn-more" href="#" >
   <i class="fa fa-angle-right"></i> More</a>
 </div>

Редактирование согласно комментарию,Чтобы увидеть только первый путь к изображению: 

<div class="row" >
 <div class="col-md-3 col-md-offset-2" *ngFor="let teaser of teasers;">
   <img alt="" class="w-100" src="../assets/images/teaser-01.jpg"/>
   <p>{{teaser.text}}</p>

   <p>First Image path: {{ teaser.image.srcSet[0].path }}</p>

   <a class="btn-more" href="#" >
   <i class="fa fa-angle-right"></i> More</a>
 </div>

PS: я не проверяю нулевые значения здесь. Это предполагает, что все объекты будут иметь эту структуру, в противном случае в консоли будут возникать ошибки.

...