如何在 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>;