Question

我有以下代码，我从这里偷走了： https://github.com/angular/material2/blob/master/src/demo-app/expansion/expansion-demo.html

  <mat-expansion-panel class="mat-expansion-demo-width" #myPanel>

    <mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
      <mat-panel-description>Click here to change view format.</mat-panel-description>
      <mat-panel-title>View Controls</mat-panel-title>
    </mat-expansion-panel-header>

    <ng-template matExpansionPanelContent>
      This is the content text that makes sense here.
      <mat-checkbox>Trigger a ripple</mat-checkbox>
    </ng-template>

    foo bar baz

    <mat-action-row>
      <button mat-button (click)="myPanel.expanded = false">CANCEL</button>
    </mat-action-row>
  </mat-expansion-panel>

一个问题 - 我很困惑，因为<ng-template>标签内的内容没有显示，但是＆＃34; foo bar baz＆＃34;显示。那么<ng-template>内的内容的目的是什么？为什么它不显示？

Answer 1

在您调用之前，

echo '<td align=left style="text-align:left">', ($data["results"][$i]["card"]["au_updated_date"]), '</td>';不会呈现。试试这个：

<ng-template>

这样您就可以构建<mat-expansion-panel class="mat-expansion-demo-width" #myPanel> <mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight"> <mat-panel-description>Click here to change view format.</mat-panel-description> <mat-panel-title>View Controls</mat-panel-title> </mat-expansion-panel-header> <ng-container *ngTemplateOutlet="matExpansionPanelContent"></ng-container> foo bar baz <mat-action-row> <button mat-button (click)="myPanel.expanded = false">CANCEL</button> </mat-action-row> </mat-expansion-panel> <ng-template #matExpansionPanelContent> <-- Note the #hashtag This is the content text that makes sense here. <mat-checkbox>Trigger a ripple</mat-checkbox> </ng-template>一次，然后重复使用它。

材料扩展面板内容 - ng-template？

1 个答案: