在angular 4中循環遍歷數組或json文件

Question

我想循環瀏覽角度為4的對象數組，我使用.ts文件將數組導出為posts.ts的變量

export var posts = [
  {
    "name":"art",
    "title":"Art",
    "items":[
      {
        "id": "1",
        "title":"Tooling Up",
        "author":"Amber Bravo",
        "date":"June 14 2015",
        "primaryColor":"#5a7785",
        "secondaryColor":"#455a64",
        "image":"https://g-design.storage.googleapis.com/production/v5/assets/tooling-up-header-a13cfd9a.svg",
        "desc":"How a new generation of prototyping tools at Google will help designers build better software.",
        "content":"# content goes here"
      },
      {
        "id": "2",
        "title":"Expressing Brand in Material",
        "author":"Viktor Persson & Rachel Been",
        "date":"July 4 2015",
        "primaryColor":"#202226",
        "secondaryColor":"#333",
        "image":"https://g-design.storage.googleapis.com/production/v5/assets/article_brand_2x1_202226-fc539618.svg",
        "desc":"Material design offers a system for designing functional and elegant software. How does your brand fit into the framework? We’ve created a step-by-step guide to staying on-brand while going material.",
        "content":"# content goes here"
      },
      {
        "id": "3",
        "title":"New Design Tools",
        "author":"Amber Bravo",
        "date":"July 29 2015",
        "primaryColor":"#3e50b4",
        "secondaryColor":"#303fc3",
        "image":"https://g-design.storage.googleapis.com/production/v5/assets/150727_GD_Article_ToolingUpFurther_1x1Tile-01-86c8e03e.svg",
        "desc":"See Also: (More) thoughts on design tools",
        "content":"# content goes here"
      }
    ]
  },
  {
    "name":"film",
    "title":"Film",
    "items":[
      {
        "id": "1",
        "title":"Design from iOS to Android (and Back Again)",
        "author":"Roman Nurik & Viltor Persson",
        "date":"Aug 20 2015",
        "primaryColor":"#3e50b4",
        "secondaryColor":"#303F9F",
        "image":"https://g-design.storage.googleapis.com/production/v5/assets/renditions/Article_iOS_to_Android_Header_3e50b4-f064882f-1240.png",
        "desc":"A practical guide to designing across platforms",
        "content":"# content goes here"
      },
      {
        "id": "2",
        "title":"Demystifying Density",
        "author":"Sebastien Gabriel",
        "date":"July 10 2015",
        "primaryColor":"#00ccb8",
        "secondaryColor":"#00b7a5",
        "image":"https://g-design.storage.googleapis.com/production/v5/assets/article_dpi_00ccb8-34fdd39e.svg",
        "desc":"Sebastien Gabriel takes one for the team with his exhaustive guide to DPI & PPI",
        "content":"# content goes here"
      },
      {
        "id": "3",
        "title":"Pixate and Form 1.3",
        "author":"Google Design",
        "date":"May 30 2015",
        "primaryColor":"#eeeeee",
        "secondaryColor":"#9e9e9e",
        "image":"https://g-design.storage.googleapis.com/production/v5/assets/pixate-and-form-1-3-header-2061f19f.svg",
        "desc":"Discover the latest features and start designing native prototypes on your device.",
        "content":"# content goes here"
      },
      {
        "id": "4",
        "title":"Welcome to the New Google Design",
        "author":"Google Design",
        "date":"Sep 10 2015",
        "primaryColor":"#3367d6",
        "secondaryColor":"#2755CC",
        "image":"https://g-design.storage.googleapis.com/production/v5/assets/Article_Welcome_Header_2880-ce3ec22d.svg",
        "desc":"More design, all the time",
        "content":" # content goes here"
      }
    ]
  },
  {
    "name":"photography",
    "title":"Photography",
    "items":[]
  },
  {
    "name":"design",
    "title":"Design",
    "items":[]
  },
  {
    "name":"topten",
    "title":"Top Ten",
    "items":[]
  },
  {
    "name":"aday",
    "title":"A Day in the Life",
    "items":[]
  }
]

然后我通常將它導入到app.componenet.ts ：

import { posts } from './posts';

現在我不知道如何循環遍歷或如何加載json文件然后循環遍歷我的意思是如何在html中循環顯示app.componenet.html數據

Answer 1

您必須傳遞此數組才能查看。

@Component(...)
class AppComponent {
    posts = posts;
...

然后在視圖中您必須使用* ngFor指令。

<ng-container *ngFor="let post of posts">
{{ post.title }}
</ng-container>