Используйте для цикла и локального массива с каждым элементом в * ngFor

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 и хочу получить каждый doctype s источник. Используя общий цикл for, я могу получить каждый источник, который использует тип документа, и отправить его в локальный массив. Я очищаю этот массив и выдвигаю каждый источник после итерации по каждому типу документа.

Однако я не могу изменить sourcesarr на глобальную переменную (доступ к которой должен получить секунда *ngFor), потому что в итоге будут храниться источники только для последнего итерированного типа документа.

Как я могу решить эту проблему?

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>