Question

[
        {
            "title": "Marker 1",
            "innercontent": "the Porcelain Factory"
        },
        {

            "title": "Marker 2",
            "innercontent": "The Taj Mahal "

        },
        {
            "title": "Marker 3",
            "innercontent": "Golconda Fort"
        }
]

上面是我的json文件。

<div *ngFor="let marker of currentmrkr">
      <div>
        {{ marker.title }}
      </div>
      <div>
        {{ marker.innercontent }}
      </div>
    </div>

上面是我的html文件。

import * as content from './content.json';
marker.addListener("click", () => {for(let item of content){
            if(marker.getTitle() == item.title){
              this.currentmrkr = item;
            }
          }
}

上面是我的打字稿文件。

显示类似-

的错误

 core.js:6260 ERROR TypeError: _content_json__WEBPACK_IMPORTED_MODULE_1___namespace is not iterable

我们如何遍历Angular的打字稿文件中的json对象，以及如何将文件导入打字稿？

Answer 1

如果您想在Typescript逻辑中迭代JSON（例如，将数据推送到Firebase），则可以使用名为Lodash的库

import * as _ from 'lodash';

myfunction(json) {
    return new Promise((resolve) => {
      _.map(json, (e, i) => {
       _.keys(e).map(() => {
        this.afs.collection('library').doc('doc ' + i).set(e);
       })
      })
     resolve();
   })
  }

如果您需要更多详细信息，我对此有完整的blog信息。否则，如果您在typescript中定义了一个简单的json对象，并且想查看HTML中的特定值，则可以使用以下方法：

import { Component } from "@angular/core";

@Component({
  selector: "app-some-section",
  templateUrl: "./some-section.component.html",
  styleUrls: ["./some-section.component.scss"],
})
export class SomeSectionComponent {
  users = [
    {
      name: "Jacob",
      job: "Analyst",
      city: "California",
    },
    {
      name: "John",
      job: "Founder",
      city: "New York",
    },
  ];

  constructor() {}

}

，然后在HTML模板中：

<div class="card" *ngFor="let user of users">
    <h3 class="job">{{ user.job }}</h3>
    <h3 class="name">{{ user.name }}</h3>
    <h3 class="city">{{ user.city }}</h3>
</div>

打字稿中json文件的迭代角度？

1 个答案: