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];
}

但是我收到错误消息，类型'Entry'上不存在属性'pageContent'。

有人可以帮助我解决问题。谢谢

Answer 1

*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

Answer 2

您需要在第一个div类行中添加ngFor

<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

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

2 个答案: