如何在 ngIf 语句中创建嵌入式 ngFor？

Question

我想做什么

我正在尝试创建一个页面，其中有一堆垫子扩展面板，每个面板都有自己的内容。内容是硬编码的，但我不想让每个页面都在它自己的组件上，而是想尝试制作一个可以重复使用并与静态服务交互的组件，以便在需要添加更多内容时可以扩展，或者如果我是以便将来将其连接到数据库。

我试过的

我试过的（变体 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);
      })
    )
  }

Service.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）。

预期结果

该部分应显示一个垫子扩展面板列表，其中包含服务中阵列的部分。

Answer 1

将*ngFor放在mat-expansion-panel上，取出*ngFor中的| async，因为你已经将管道应用于*ngIf中的title。

编辑：

您的 pctSearch 函数应该是：

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

请记住，这将为您 return 一组与 slug 匹配的 pct。因此，如果您只想要第一个元素，而不是只获取第一个索引。

编辑 2：

这只是一个小错误，您的 *ngFor 中缺少“let”。在请求 sTitle 等属性时，您还需要在循环中使用实际元素。同样在您声明代码的组件中，您还应该将其类型声明为 Observable 而不是任何类型（将任何类型更改为任何类型） .

所以你的模板应该是这样的：

<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>;

如何在 ngIf 语句中创建嵌入式 ngFor？

How can I create an embedded ngFor inside of an ngIf statement?

service

angular-material

angular

angular9

我想做什么

我试过的

其他代码

发生了什么？

预期结果