Question

我需要动态呈现手风琴内部的扩展面板列表。

标记非常简单：

<mat-accordion *ngIf="currentVenue">
  <mat-expansion-panel *ngFor="let gig of currentVenue.gigs" expanded="false">
    <mat-expansion-panel-header>
      <mat-panel-title>
        {{gig.name}}
      </mat-panel-title>
      <mat-panel-description>
        Type your name and age
      </mat-panel-description>
    </mat-expansion-panel-header>

  </mat-expansion-panel>
</mat-accordion>

不幸的是，这导致无法使用的控件。页眉未打开面板，整个手风琴功能也被弄乱了。我需要在控件外部单击，然后随机打开一个子扩展面板（或不打开）。

如果我依次使用“静态”方法（我从示例代码中复制了此方法），那么一切都会按预期进行：

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Personal data
      </mat-panel-title>
      <mat-panel-description>
        Type your name and age
      </mat-panel-description>
    </mat-expansion-panel-header>

    <mat-form-field>
      <input matInput placeholder="First name">
    </mat-form-field>

    <mat-form-field>
      <input matInput placeholder="Age">
    </mat-form-field>
  </mat-expansion-panel>
  [...]
</mat-accordion>

我的猜测是，它与*ngIf和控件的创建方式有关。

我正在使用Angular Material 6.4.7和Angular 6.1.10

Answer 1

您正确的*ngIf在这里做一些有趣的事情。这是一个结构指令，因此在较低层次上，Angular使其不同于其他组件。这种渲染可能会干扰其他结构指令，因此Angular仅一次允许将模板绑定到一个结构指令。

但好消息！名称中的星号只是结构指令真正起作用的语法糖。如果我们将名称去糖并将其明确绑定到模板，包围手风琴本身，Angular将能够使用此模板上下文呈现嵌套指令，而不是使用组件的模板：

  <ng-template [ngIf]="currentVenue">
    <mat-accordion>
      <mat-expansion-panel *ngFor="let gig of currentVenue.gigs" expanded="false">
        <mat-expansion-panel-header>
          <mat-panel-title>
            {{gig.name}}
          </mat-panel-title>
          <mat-panel-description>
            Type your name and age
          </mat-panel-description>
        </mat-expansion-panel-header>

      </mat-expansion-panel>
    </mat-accordion>
  </ng-template>

请注意，ngIf现在如何像常规指令一样进行绑定。只能在ng-template标签上使用。没有星号，Angular将不会尝试将其他模板绑定到它，并且嵌套指令将起作用。

我们也可以给重复的项目使用自己的ng-template和ngForOf伪指令，但是使用[ngIf]的语法更加简洁。

动态渲染的mat-expansion-panel无法正常工作

1 个答案: