Угловой 6 - Цикл по таблице материалов внутри панели расширения материала - PullRequest
Новая
       5

Угловой 6 - Цикл по таблице материалов внутри панели расширения материала

0 голосов
/ 26 сентября 2018

У меня есть проблема, с которой я вроде как потерян.У меня есть панели расширения материала, заголовок которых заполняется путем циклического перебора переменной, содержащей мои данные, которая является массивом объектов - в этом массиве объектов есть ключ, значение которого является заголовком панели расширения.Есть также ключ, значением которого является другой массив объектов, который я хочу циклически просмотреть, чтобы заполнить таблицу материалов внутри каждой панели расширения.

Вот то, что у меня есть до сих пор ...

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 под каждой панелью расширения.

Я хочу, чтобы соответствующая панель расширения отображала правильные данные

Панель расширения первого заголовка для отображения таблицы, показывающей:

Info One

Info Two

Info Three

Info Four

Панель расширения второго заголовка для отображения таблицы, показывающей:

Package

Package Two

И так далее.Я заблудился относительно того, как это сделать - любая помощь будет принята с благодарностью, спасибо!

1 Ответ

0 голосов
/ 26 сентября 2018

Вы должны определить разделенные 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;
};

И затем использовать titlesForIterate в *ngFor панелей расширения. 

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

А затем внутри каждой панели расширения используйте свои собственные элементы dataSource и selectionModel для своих таблиц. 

<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>
    ...

note : не забудьте изменить метод isAllSelected для получения родительского объекта в качестве параметра.

...