gpt4 book ai didi

javascript - Angular 6 - 循环遍历 Material 扩展面板内的 Material 表

转载 作者:行者123 更新时间:2023-11-29 23:16:37 25 4
gpt4 key购买 nike

我有一个问题有点不知所措。我有 Material 扩展面板,通过循环包含我拥有的数据的变量来填充标题,这是一个对象数组 - 在该对象数组中,有一个键,其值为扩展面板标题。还有一个键,其值是另一个对象数组,我想遍历其中以填充每个扩展面板内的 Material 表。

这是我目前所拥有的......

titleGroups.ts:

export const titles = [
{
title: 'First Title',
titleId: 'firstTitle',
info: [
{ name: 'Info One', code: 'infoOne' },
{ name: 'Info Two', code: 'infoTwo' },
{ name: 'Info Three', code: 'infoThree' },
{ name: 'Info Four', code: 'infoFour' }
]
},
{
title: 'Second Title',
titleId: 'secondTitle',
info: [
{ name: 'Package', code: 'package' },
{ name: 'Package Two', code: 'packageTwo' }
]
},
{
title: 'Third Title',
titleId: 'thirdTitle',
info: [
{ name: 'Widget One', code: 'widgetOne' },
{ name: 'Widget Two', code: 'widgetTwo' },
{ name: 'Widget Three', code: 'widgetThree' },
{ name: 'Widget Four', code: 'widgetFour' }
]
}
]

title.component.ts:

import {Component} from '@angular/core';
import {SelectionModel} from '@angular/cdk/collections';
import {MatTableDataSource} from '@angular/material';
import {titles} from './titleGroups';

export interface TitleNames {
name: string;
}

const TITLES: any[] = titles;

let TITLE_NAMES;
for(let i = 0; i < TITLES.length; i++)
for(let j = 0; j < TITLES[i].info.length; j++)
TITLE_NAMES = TITLES[i].info;

@Component({
selector: 'aa-titles',
templateUrl: './aa-titles.component.html',
styleUrls: ['./aa-titles.component.scss']
})

export class TitlesComponent {
displayedColumns: string[] = ['select', 'name'];
dataSource = new MatTableDataSource<TitleNames>(TITLE_NAMES);
selection = new SelectionModel<TitleNames>(true, []);
titleData: any;

constructor() {
this.titleData = TITLES;
}

isAllSelected() {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length;

return numSelected === numRows;
}

masterToggle() {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.data.forEach(row => this.selection.select(row));
}
}

title.component.html:

<mat-accordion multi="true">
<mat-expansion-panel *ngFor="let item of titleData">
<mat-expansion-panel-header>{{item.title}}</mat-expansion-panel-header>

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Checkbox Column -->
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>

<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="selection.toggle(row)">
</tr>
</table>
</mat-expansion-panel>
</mat-accordion>

发生的事情是,在每个扩展面板下,它仅显示每个扩展面板下 titleGroups.ts 中标题的最后一个元素的数据。

我想要的是对应的扩展面板显示正确的数据

第一个显示表格的标题扩展面板显示:

信息一

信息二

信息三

信息四

第二个标题扩展面板显示表格:

套餐二

等等。我不知道如何做到这一点 - 任何帮助将不胜感激,谢谢!

最佳答案

您应该为每个表定义单独的 dataSource-s 和 selectionModel-s:例如,您可以在 constructor 中定义这样的数组:

this.titlesForIterate = titles.map(item => { 
// I'm not doing it here, but you can also deep clone the item object first
item.dataSource = new MatTableDataSource<WidgetNames>(item.info);
item.selectionModel = new SelectionModel<TitleNames>(true, []);
return item;
};

然后在expansionPanels的*ngFor中使用titlesForIterate

<mat-expansion-panel *ngFor="let item of titlesForIterate">

然后在每个 expansionPanel 中为它们的表使用它们自己的 dataSourceselectionModel 成员。

<table mat-table [dataSource]="item.dataSource" class="mat-elevation-z8">

...
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="item.selection.hasValue() && isAllSelected(item)"
[indeterminate]="item.selection.hasValue() && !isAllSelected(item)">
</mat-checkbox>
...

注意:不要忘记重构 isAllSelected 方法以接收父对象作为参数。

关于javascript - Angular 6 - 循环遍历 Material 扩展面板内的 Material 表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52522008/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com