在 Angular ngFor 集中显示嵌套数据不起作用

Question

我有一个要显示的值集。这是它的结构。我遇到的问题是尝试显示第三项，因为它的结构略有不同。请注意，这可以是动态的，因此它不会总是具有不同结构的第三个项目。

[
  {
    "id": "1b255d6d-f771-4c16-9d64-fdb188dc9298",
    "categoryId": null,
    "filename": "dummy.pdf",
    "url": "http..."
  },
  {
    "id": "8d17ee10-54e0-48eb-8c21-83e7c6ca6751",
    "categoryId": null,
    "filename": "dummy (1).pdf",
    "url": "http..."
  },
  [
    {
      "id": "42b30baf-a945-412e-a53d-803e57c684cf",
      "categoryId": null,
      "filename": "1 Rules of the Road draft1.pdf",
      "url": "http..."
    }
  ],
  {
    "id": "1d0531e0-f0ad-4026-bfa0-5f19fa4fbca0",
    "categoryId": null,
    "filename": "offer.pdf",
    "url": "http..."
  }
]

这是我的 HTML

<div *ngIf="candidateDocuments" class="ui-g-12 ui-md-12 ">
  <div *ngFor="let doc of candidateDocuments" class="ui-g-6 ui-sm-12">
    <div class="doc-container">
      <span
        ><img src="img"
      /></span>
      <span>{{ doc.filename }}{{ doc.filetype }}</span> 
      <button (click)="openDocWindow(doc.url)">...</button>
    </div>
  </div>
</div>

我尝试了下面的方法，但它不起作用

<div *ngIf="candidateDocuments" class="ui-g-12 ui-md-12 ">
  <div *ngFor="let doc of candidateDocuments; let i = index" class="ui-g-6 ui-sm-12">
    <div class="doc-container">
      <span
        ><img src="img"
      /></span>
      <span>{{ doc.filename }}{{ doc.filetype }}</span> 
      <button (click)="openDocWindow(doc.url)">...</button>
      <div *ngFor="let userdoc of doc.Array" class="ui-g-6 ui-sm-12">
          <div class="doc-container">
            <span
              ><img src="img"
            /></span>
            <span>{{ userdoc.filename }}{{ userdoc.filetype }}</span> 
            <button (click)="openDocWindow(userdoc.url)">...</button>
          </div>
        </div>
    </div>
  </div>
</div>

Answer 1

使用||运算符：

Created a stackblitz working example for you

 <div *ngFor="let doc of candidateDocuments" class="ui-g-6 ui-sm-12">
    <div class="doc-container">
      <span><img src="img"/></span>
      <span>{{ doc.filename || doc[0].filename}}{{ doc.filetype || doc[0].filetype }}</span> 
      <button (click)="openDocWindow(doc.url || doc[0].url)">...</button>
    </div>
  </div>

Answer 2

通过使用 *ngIf else 条件：

<div *ngIf="candidateDocuments" class="ui-g-12 ui-md-12 ">
<div *ngFor="let doc of candidateDocuments" class="ui-g-6 ui-sm-12">
    <div class="doc-container">
        <div *ngIf="doc.filename; else other">
            <span>{{ doc.filename }}{{ doc.filetype }}</span> 
  <button (click)="openDocWindow(doc.url)">...</button>
   </div>
   <ng-template #other>

        <div *ngFor="let d of doc" class="ui-g-6 ui-sm-12">
     {{d.filename}}
        <button (click)="openDocWindow(d.url)">...</button>
          </div>
   </ng-template>
</div>

在 Angular ngFor 集中显示嵌套数据不起作用

Displaying nested data in Angular ngFor set not working

angular

angular-template

angular-ngfor