如何在 ngIf 語句中創建嵌入式 ngFor？

Question

我想做的事

我正在嘗試創建一個頁面，其中有一堆墊子擴展面板，每個面板都有自己的內容。 內容是硬編碼的，但是我不想讓每個頁面都在它自己的組件上，我想嘗試制作一個可以重用並與 static 服務交互的組件，以便在需要添加更多內容時可擴展，或者如果我是將來將其連接到數據庫。

我試過的

我試過的（變奏1）

<article *ngIf="code$ | async as title">
    <h1>{{title.title}}</h1>
    <div *ngFor="section of title.sections | async">
        <mat-expansion-panel>
            <mat-expansion-panel-header>
                <mat-panel-title>
                    {{sTitle}}
                </mat-panel-title>
                <mat-panel-description>
                    {{sDesc}}
                </mat-panel-description>
            </mat-expansion-panel-header>
            <div>
                {{sContent}}
            </div>
        </mat-expansion-panel>
    </div>
</article>

我試過的（變奏2）

<article *ngIf="code$ | async as title">
    <h1>{{title.title}}</h1>
    <div *ngFor="section of title.sections | async as section">
        <mat-expansion-panel>
            <mat-expansion-panel-header>
                <mat-panel-title>
                    {{sTitle}}
                </mat-panel-title>
                <mat-panel-description>
                    {{sDesc}}
                </mat-panel-description>
            </mat-expansion-panel-header>
            <div>
                {{sContent}}
            </div>
        </mat-expansion-panel>
    </div>
</article>

我試過的（變奏3）

<article *ngIf="code$ | async as title">
    <h1>{{title.title}}</h1>
    <div *ngFor="section of title.sections | async">
        <mat-expansion-panel>
            <mat-expansion-panel-header>
                <mat-panel-title>
                    {{this.sTitle}}
                </mat-panel-title>
                <mat-panel-description>
                    {{this.sDesc}}
                </mat-panel-description>
            </mat-expansion-panel-header>
            <div>
                {{this.sContent}}
            </div>
        </mat-expansion-panel>
    </div>
</article>

我試過的（變奏4）

<article *ngIf="code$ | async as title">
    <h1>{{title.title}}</h1>
    <div *ngFor="section of title.sections | async">
        <mat-expansion-panel>
            <mat-expansion-panel-header>
                <mat-panel-title>
                    {{this.section.sTitle}}
                </mat-panel-title>
                <mat-panel-description>
                    {{this.section.sDesc}}
                </mat-panel-description>
            </mat-expansion-panel-header>
            <div>
                {{this.section.sContent}}
            </div>
        </mat-expansion-panel>
    </div>
</article>

其他代碼

Component.ts 的片段（一切都在頂部很好地導入）

code$: any;
  constructor(
    private pcts: StaticService,
    private route: ActivatedRoute
  ){}
  ngOnInit(){
    this.code$ = this.route.paramMap.pipe(
      map(params => {
        const title = params.get('slug');
        return this.pcts.pctSearch(title);
      })
    )
  }

服務.ts

export interface tSect {
  sTitle: string;
  sDesc: string;
  sContent: string;
}
export interface pct {
  id: string;
  title: string;
  sections: tSect[];
}
...
{
  id: "...",
  title: "...",
  sections: [
     {sTitle: 'Test', sDesc: 'Test', sContent: 'test'},
     {sTitle: 'Tes2t', sDesc: 'Test2', sContent: 'test2'},
  ],
},
...
pctSearch(slug: string) {
    var __FOUND = -1;
    for(var t = 0; t < this.pctarr.length; t++) {
      if(this.pctarr[t].id == slug) {
        __FOUND = t;
        return this.pctarr[__FOUND];
      }
    }
  }

怎么了？

我收到一條錯誤消息，指出組件上不存在該屬性（sContent、sTitle 或 sDesc）。

預期結果

該部分應顯示一個 mat-expansion-panel(s) 列表，其中包含服務中陣列中的部分。

Answer 1

將 *ngFor 放在 mat-expansion-panel 上並取出| async *ngFor 中的| async ，因為您已經將 pipe 應用於 *ngIf 中的title 。

編輯：

您的 pctSearch function 應該是：

pctSearch(slug: string) {
    return this.pctarr.filter(pct => pct.title === slug);
}

請記住，這將返回一個與 slug 匹配的 pct 數組。 因此，如果您只想要第一個元素，而不僅僅是獲取第一個索引。

編輯2：

這只是一個小錯誤，您的 *ngFor 中缺少“let”。 在請求諸如 sTitle 等屬性時，您還需要在循環中使用實際元素。此外，在您聲明 code$ 的組件中，您還應該將其類型而不是 any 聲明為 Observable（將 any 更改為您的任何類型） .

所以你的模板看起來像這樣：

<mat-expansion-panel *ngFor="let section of title.sections">
    <mat-expansion-panel-header>
        <mat-panel-title>
            {{section.sTitle}}
        </mat-panel-title>
        <mat-panel-description>
            {{section.sDesc}}
        </mat-panel-description>
    </mat-expansion-panel-header>
    <div>
        {{section.sContent}}
    </div>
</mat-expansion-panel>

同樣在您的組件中，您應該像這樣聲明 code$ ：

code$: Observable<any>;