Question

我正在调整此布局，在该布局中我会为每个数据正确显示的角度生成矩阵卡和切换按钮，但是切换按钮无法正常工作。我没有错误可循，这是我的第一个角度项目。

我将代码放在这里 https://stackblitz.com/edit/angular-kpzast-jmn8uh?file=src/app/card-overview-example.ts

打字稿

export class CardOverviewExample {

  readonly chunkSize: number = 1;

  data = ['data1', 'data2', 'data3', 'data4'];

  getChunkedData() {
    var chunkedData = [];
    for (let i = 0; i < this.data.length; i += this.chunkSize) {
      chunkedData.push(this.data.slice(i, i + this.chunkSize));
    }
    return chunkedData;
  }
}

HTML

<mat-card *ngFor="let data of getChunkedData()">
  <p *ngFor="let item of data">
  {{item}}
  </p>
  <mat-button-toggle-group #group="matButtonToggleGroup">
  <mat-button-toggle value="left" aria-label="Text align left">
    <mat-icon>format_align_left</mat-icon>
  </mat-button-toggle>
  <mat-button-toggle value="center" aria-label="Text align center">
    <mat-icon>format_align_center</mat-icon>
  </mat-button-toggle>
  <mat-button-toggle value="right" aria-label="Text align right">
    <mat-icon>format_align_right</mat-icon>
  </mat-button-toggle>
  <mat-button-toggle value="justify" disabled aria-label="Text align justify">
    <mat-icon>format_align_justify</mat-icon>
  </mat-button-toggle>
</mat-button-toggle-group>
<div class="example-selected-value">Selected value: {{group.value}}</div>
</mat-card>

Answer 1

问题是，所有切换组只有一个#group。您应该将它们标记为＃group1＃group2等。而是找到另一种方法来增加mat-toggle-group或在其上使用（更改）事件。

使用卡片切换按钮动态创建布局

1 个答案: