如何让数组在Angular 7中显示对其子项的迭代

Question

我正在尝试让父级及其子级进行排列并将其显示给 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 中显示，例如：照片（路径）和带文本的 href。

这是我的代码

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>

Answer 1

鉴于你的对象的结构，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：我没有在这里检查空值。这假设所有对象都具有这种结构，否则将在控制台中抛出错误。