Итерация по массиву объектов в машинописи и отображение в html

Question

Я довольно новичок в angular 7, и у меня есть такой объект.

this.data = {
   title:"mypage",
   pageContent:{
       fields:{
           history:[{
               sys:{},
               fields:{
                 title:"my book",
                 description:"my description"
               }
           },

           {
              sys:{},
               fields:{
                 title:"book1",
                 subtitle:"description1"
               }
           },
            {
              sys:{},
               fields:{
                 title:"book2",
                 subtitle:"description3"
               }
           }]
       }
   } 
}

В представлении у меня есть 3 раздела для отображения каждого элемента в массиве.

<div class="row">

      <div class="row">
      <!-- Display first item in the array -->
       <h3 class="text-center">{{data.fields.title}}</h3>
       <p class="our-history-text text-center">{{data.fields.description}}</p>
       </div>
       <!-- Second item in the array -->
       <div class="our-history-text-small" [innerHTML]="data.fields.subtitle | markdownToHtml" spaLinkTransformer></div> 
        <!-- Third item in the array -->
     <div class="our-history-text-small" [innerHTML]="data.fields.subtitle | markdownToHtml" spaLinkTransformer></div> 

</div>

Мне было интересно, если: 1. Мне нужно использовать * ngFor в представлении перебирать массив. Если так, как я могу использовать индекс в представлении, чтобы просто отобразить указанные c элементы в списке. 2. Если мне нужно провести l oop через массив в компоненте, назначьте его отдельным переменным и используйте его в поле зрения. Например:

myHistory: Entry<any>;
this.myservice.fetchAll(locale)
.then(entries => {
    this.myPage = entries.fields;
    this.myHistory = this.myHistory.pageContent.fields.history[0];
}

Но я получаю сообщение об ошибке. Свойство pageContent не существует в типе Entry.

Может кто-нибудь помочь мне с решением. Спасибо

Answer 1

Вам необходимо добавить ngFor в первую строку класса div

<div class="row" *ngFor="let data of data.pageContent.fields.history">

    <div class="row">
        <!-- Display first item in the array -->
        <h3 class="text-center">{{data.fields.title}}</h3>
        <p class="our-history-text text-center">{{data.fields.description}}</p>
    </div>
    <!-- Second item in the array -->
    <div class="our-history-text-small" [innerHTML]="data.fields.subtitle" spaLinkTransformer></div>
    <!-- Third item in the array -->
    <div class="our-history-text-small" [innerHTML]="data.fields.subtitle" spaLinkTransformer></div>

</div>

При ошибке свойства 'pageContent' does not exist on type 'Entry' необходимо проверить Entry определенный класс.

Демонстрационный код Stackbliz: https://stackblitz.com/edit/angular-exrzwf

Answer 2

*ngFor является идеальным решением, поскольку вы должны написать шаблон только один раз.

Перебрать массив data.pageContent.fields.history, используя ngFor

    <div class="row" *ngFor="let item of data.pageContent.fields.history; let i = index">
        <h3 class="text-center">{{item.fields.title}}</h3>
        <p class="our-history-text text-center">{{item.fields.description}}</p>
        <p>Index: {{i}}</p>
    </div>

У меня есть Создано exmaple в стекаблике на основе ваших данных