动态呈现 mat-expansion-panel 未按预期工作

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>

不幸的是，这会导致无法使用控件。 header 没有打开面板，整个手风琴功能也被搞砸了。我需要在控件外部单击，然后随机打开一个 child 扩展面板（或不打开）。

如果我依次使用 "static" 方法（我从示例代码中复制了这个），一切都会按预期进行：

<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 未按预期工作

Dynamically rendered mat-expansion-panel is not working as intended

angular-material2

angular