遍历打字稿中的对象数组并显示在 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 来遍历数组。如果是这样，我如何在视图中使用索引来仅显示列表中的特定项目。 2. 如果我应该循环遍历组件中的数组，将它分配给单独的变量并在视图中使用它。例如：

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 是理想的解决方案，因为您只需编写一次模板。

使用 ngFor

遍历 data.pageContent.fields.history 数组

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

我根据您的数据在 stackblitz 中创建了 exmaple

Answer 2

您需要将 ngFor 添加到第 div class 行

<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'错误，需要检查Entryclass定义。

Stackbliz 演示代码：https://stackblitz.com/edit/angular-exrzwf

遍历打字稿中的对象数组并显示在 html 中

Iterate over array of Objects in typescript and display in html

typescript

angular7