Угловой материал: как получить все данные, кроме отображения на разных вкладках - PullRequest
Новая
       26

Угловой материал: как получить все данные, кроме отображения на разных вкладках

0 голосов
/ 05 февраля 2019

У меня вопрос с дизайном: как лучше всего загрузить две разные вкладки материала?Мне нужна одна вкладка для активных записей и одна для неактивных.

Нужны ли мне два разных источника данных или я могу указать моему источнику данных использовать дискриминатор (логическое значение), чтобы определить, на какой вкладке отображаются данные?Извините, у меня нет примера кода, потому что я не уверен, с чего начать!

Кроме того, когда строка на активной вкладке удаляется, она должна отображаться на неактивной вкладке.,Хотелось бы сделать это без перекраски экрана ...

Ответы [ 2 ]

0 голосов
/ 05 февраля 2019

Угловые вкладки материала загружаются с нетерпением по умолчанию.Итак, просто настройте две разные вкладки с таблицей и предоставьте этим таблицам другой источник данных.Похоже, отличный вариант использования для rxjs, позволяющий вам легко получить оба источника данных вашей таблицы из одного и того же базового места (например, вашего сервиса).Это означает, что вы можете вносить изменения в свои данные в источнике правды для этих данных (то есть в службу данных), и эти изменения будут распространяться на ваши таблицы.

HTML: 

<mat-tab-group>
    <mat-tab label="Active">
        <ng-template matTabContent>
            <table mat-table [dataSource]="activeSource | async">
                <!-- Insert your table config here -->
            </table>
        </ng-template>
    </mat-tab>
    <mat-tab label="Inactive">
        <ng-template matTabContent>
            <table mat-table [dataSource]="inactiveSource | async">
                <!-- Insert your table config here -->
            </table>
        </ng-template>
    </mat-tab>
</mat-tab-group>

Компонент: 

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { filter } from 'rxjs/operators';
import { YourDataService } from './your-data-service';

@Component({
    selector: 'app-test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {

    activeSource: Observable<any[]>;
    inactiveSource: Observable<any[]>;

    constructor(private dataService: YourDataService) { }

    ngOnInit(): void { 
        this.activeSource = this.dataService.data$.pipe(filter(record => record.active));
        this.inactiveSource = this.dataService.data$.pipe(filter(record => !record.active));
    }

    markRecordAsActive(id: string) {
        this.dataService.markAsActive(id);
    }

    markRecordAsInactive(id: string) {
        this.dataService.markAsInactive(id);
    }
}
0 голосов
/ 05 февраля 2019

У меня вопрос дизайна: как лучше всего загрузить две разные вкладки материала?Мне нужна одна вкладка для активных записей и одна для неактивных.

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

Нужны ли мне два разных источника данных или я могу указать моему источнику данных использовать дискриминатор (логическое значение)?определить, на какой вкладке отображаются данные?Извините, у меня нет примера кода, потому что я не уверен, с чего начать!

Это на самом деле проектное решение, которое вы должны принять на основе архитектуры вашего приложения, итрудно что-то предложить, не видя более конкретного примера или кода.Если индикаторы, отображаемые на обеих вкладках, являются частью одной и той же коллекции (коллекция БД, таблица и т. Д.) И между ними имеется только различие в отношении статуса или флага, обычно имеет смысл использовать один и тот же источник данных и фильтровать его на основе/ статус флага.В противном случае вам может потребоваться два отдельных источника данных.

Кроме того, когда строка на активной вкладке удаляется, она должна отображаться на неактивной вкладке.Хотелось бы сделать это без перерисовки экрана ...

Если вы используете один источник данных, потребуется только изменить статус / флаг элемента, и он будет обновляться в представлении,Для разных источников данных вам необходимо переместить элемент между ними.

Что касается перекраски, она, очевидно, потребуется при изменении содержимого (в противном случае будет разница между вашей моделью и представлением).Тем не менее, Angular / Angular Material созданы для его оптимизации, и поэтому это не должно вызывать беспокойства, если вы будете следовать рекомендациям Angular.

...