Angular 2, как отобразить объект массива внутри массива объектов

Question

Это мой json-файл,

            country_id:String,
            name:String
            scholardetails:[{
                country_id:String,
                scholarshipname:String,
                scholarshiplink:String
            }]
        },{collection:'new_countryMaster'});

Во внешнем интерфейсе, для * ngFor выдано вот так:

 <div *ngFor="let country of countries">
       <p>{{country.name}}<p>
  </div>
<div *ngFor="let item of countries.scholardetails">
       <p>{{item.scholarshipname}}<p>
  </div>

моя машинопись,

countries: any;

  constructor(private route: ActivatedRoute, private http: HttpClient) { }

  ngOnInit() {
    this.getscholardetails(this.route.snapshot.params['id']);
  }

  getscholardetails(id) {
    this.http.get('http://localhost:3000/api/scholardetails/'+id).subscribe(data => {
      this.countries= data;
    });
  }

Iтолько может получить и отобразить имя, но не может получить стипендию country_id, стипендию и стипендию.Я не могу найти, где я сделал ошибку. Пожалуйста, помогите мне, если кто-нибудь знает.

Answer 1

Переменная country в вашем *ngFor доступна только внутри соответствующего тега div, поэтому ваш внешний HTML должен выглядеть следующим образом:

<div *ngFor="let country of countries">
   <p>{{country.name}}<p>

   <div *ngFor="let item of country.scholardetails">
      <p>{{item.scholarshipname}}<p>
   </div>

 </div>

Answer 2

Попробуйте это, второй нг для должно быть так.

<div *ngFor="let item of countries['scholardetails']"> {{item.scholarshipname}}
</div> 

Answer 3

Вам нужно поместить второй ngFor внутри первого и иметь вложенный ngFor

<div *ngFor="let country of countries"> <p>{{country.name}}<p>
    <div *ngFor="let item of countries.scholardetails">     
<p>{{item.scholarshipname}}<p>
 </div>
</div>