对 *ngFor 中的每个项目使用 for 循环和本地数组

Question

//this.http.get("https://example.com/_api/web/lists/getbytitle('ImagingDocumentTypes')/items?$select=Title,Image,Source/Title,System/Title&$orderBy=Title&$expand=Source,System&$filter=System/Title eq '" + this.item + "'").subscribe(data => {
//this.doctypes = data['value'];

//EXAMPLE OUTPUT IS: 
this.doctypes = [{
  "Source": [{
    "Title": "Anchor (MN)"
  }, {
    "Title": "United Bancorp"
  }, {
    "Title": "Lafayette Savings Bank"
  }],
  "Title": "Commercial Loans",
}, {
  "Source": [{
    "Title": "Anchor (WI)"
  }, {
    "Title": "United Bancorp"
  }, {
    "Title": "Old National"
  }],
  "Title": "Checks",
}, {
  "Source": [{
    "Title": "Anchor (MN)"
  }, {
    "Title": "Anchor (WI)"
  }, {
    "Title": "Old National"
  }],
  "Title": "HR Documents",
}]


for (let i = 0; i < this.doctypes.length; i++) {
  let sources = this.doctypes[i].Source;
  let sourcesarr = [];
  for (let i = 0; i < sources.length; i++) {
    console.log(sources[i].Title)
    sourcesarr.push(sources[i].Title)
    console.log(sourcesarr)
  }
  sourcesarr.sort()
}

//})

	<script src="https://code.angularjs.org/tools/system.js"></script>
	<script src="https://code.angularjs.org/tools/typescript.js"></script>
	<script src="https://code.angularjs.org/2.0.0-alpha.39/angular2.dev.js"></script>

<table>
  <tr>
    <th class="modalheader">Document Types</th>
    <th class="modalheader">Sources</th>
  </tr>
  <tr *ngFor="let doctype of doctypes">
    <td>{{doctype.Title}}</td>
    <td>
      <!-- WANT EVERY SOURCE FOR EACH DOCTYPE HERE -->
    </td>
  </tr>
</table>

我已经为文档类型及其来源建立了一个表格。

使用*ngFor，我正在循环一个名为this.doctypes 的对象数组，并希望获取每个doctypes 源。使用常见的for 循环，我可以获取使用文档类型的每个源并将其推送到本地数组。在遍历每个文档类型后，我正在清除这个数组并推送每个源。

但是，我不能将 sourcesarr 更改为全局变量（供第二个 *ngFor 访问），因为它最终只会存储最后一个迭代的 doctype 的源。

我该如何解决这个问题？

Answer 1

如果我正确理解了您的问题，我认为这可能会有所帮助。让我知道这是否有效：

<table>
  <tr>
    <th class="modalheader">Document Types</th>
    <th class="modalheader">Sources</th>
  </tr>
  <tr *ngFor="let doctype of doctypes">
    <td>{{doctype.Title}}</td>
    <td>
        <div *ngFor="let source of doctype.Source">
            {{source.Title}}
        </div>
    </td>
  </tr>
</table>