Схема таблицы угловых 6 материалов: как загрузить данные с пульта?

Question

Я использую схему таблицы материалов и не могу понять, как

Я думаю, что важной частью является connect() метод в файле datasource.ts.this.data - это просто массив.

  /**
   * Connect this data source to the table. The table will only update when
   * the returned stream emits new items.
   * @returns A stream of the items to be rendered.
   */
  connect(): Observable<any[]> {
    // Combine everything that affects the rendered data into one update
    // stream for the data-table to consume.
    const dataMutations = [
      observableOf(this.data),
      this.paginator.page,
      this.sort.sortChange
    ];

    // Set the paginators length
    this.paginator.length = this.data.length;

    return merge(...dataMutations).pipe(
      map(() => {
        return this.getPagedData(this.getSortedData([...this.data]));
      })
    );
  }

Как мне обновить this.data так, чтобы таблица отражала данные?Мне нужно загрузить данные только один раз.Я бы хотел, чтобы все операции фильтрации и сортировки выполнялись на стороне клиента.

Я нашел это руководство , но оно выглядит как излишнее и было написано до того, как была создана эта схема.

Нет ли способа обновить this.data, поскольку он обернут в observableOf()?

Answer 1

Пожалуйста, попробуйте @matheo/datasource, чтобы правильно настроить службу базы данных и источник данных.

Я создал демо на StackBlitz и представил подробности по адресу:
https://medium.com/@matheo/reactive-datasource-for-angular-1d869b0155f6

Я постараюсь найти время и для того, чтобы предоставить Схему с некоторым стандартным кодом.
Ждем Вашего мнения!

Answer 2

После поиска учебников я вернулся к Официальному примеру , который оказался очень интуитивным.

У меня было такое же требование к вашему вопросу, просто загрузите данные один раз и управляйте манипуляциями на стороне клиента.

Однако я прекратил обработку манипуляций на стороне сервера.

Позвольте мне сделать предположение, у вас есть конечная точка, которая возвращает список объектов.

/ апи / книги /

1: Создать службу с помощью метода http-call для получения конечной точки ваших книг (book.service.ts)

private booksUrl = "/api/books";
 _getBooks(bookId: number, filter='', sortOrder='asc', pageNumber=0, 
pageSize=3):Observable<Book[]>{
    return this.http.get(this.booksUrl, {
      params: new HttpParams()
          .set('bookId', _bookId.toString())
          .set('filter', filter)
          .set('sortOrder', sortOrder)
          .set('pageNumber', pageNumber.toString())
          .set('pageSize', pageSize.toString())
      }).pipe(
          tap(_ => this.log('fetched books')),
          catchError(this.handleError('getBooks', [])),
          map(res =>  {
        res["payload"] = res;
        return res["payload"];
      })
      );
    }

Определите класс вашей Книги

export class Book{
    bookId: string;
    Title: string;
}

Затем я создал компонент Material-Table, используя схемы таблицы данных.

Я отредактировал источник данных таблицы как таковой

import { Book } from '../books';
import { BookService } from '../book.service';


/**
 * Data source for the Masterlist view. This class should
 * encapsulate all logic for fetching and manipulating the displayed data
 * (including sorting, pagination, and filtering).
 */
export class BooksDataSource implements DataSource<Book> {

  private booksSubject = new BehaviorSubject<Book[]>([]);
  private loadingSubject = new BehaviorSubject<boolean>(false);

  public loading$ = this.loadingSubject.asObservable();

  constructor(private bookService: BookService) {}

  /**
   * Connect this data source to the table. The table will only update when
   * the returned stream emits new items.
   * @returns A stream of the items to be rendered.
   */
  connect( collectionViewer:CollectionViewer): Observable<Book[]> {
    return this.booksSubject.asObservable();
  }

  /**
   *  Called when the table is being destroyed. Use this function, to clean up
   * any open connections or free any held resources that were set up during connect.
   */
  disconnect(collectionViewer: CollectionViewer): void {
    this.booksSubject.complete();
    this.loadingSubject.complete();
  }

  loadBooks(bookId: number, filter = '', sortDirection = 'asc', pageIndex = 0, pageSize = 3) {
    this.loadingSubject.next(true);
    this.bookService._getBook(bookId, filter, sortDirection,pageIndex, pageSize).pipe(
      catchError(e => throwError(e)),

      finalize(() => this.loadingSubject.next(false))
      )
      .subscribe(_books => this.booksSubject.next(_books));
}    
}

Наконец, на Books.Components.ts (ваш компонент)

export class BooksComponent implements OnInit {

  constructor(private bookService: BookService){}

  dataSource: BooksDataSource;

  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
  displayedColumns = ['bookId', 'Title'];

  ngOnInit() {
    this.dataSource = new MasterlistDataSource(this.bookService);
    this.dataSource.loadBooks(1);
  }
}

Отсюда вы можете сопоставить источник данных со своей таблицей.

Официальный пример продолжает показывать, как реализовать сортировку, разбиение на страницы, фильтрацию.

Счастливое кодирование: -)

Answer 3

У меня была такая же проблема. Изменение dataSource.data = newData не было обнаружено observableOf(this.data),.

Исправлено с решением из этой темы и показано в в этом примере .

Вы должны заменить это observableOf(this.data) на this.datastream. Таким образом, этот метод подключения будет выглядеть так:

connect(): Observable<DataTableItem[]> {
  const dataMutations = [
  this.dataStream,
  this.paginator.page,
  this.sort.sortChange

И в начале класса вместо объявления переменной data: TableItem[] = EXAMPLE_DATA; вы заменяете это на:

dataStream = new BehaviorSubject<DataTableItem[]>(EXAMPLE_DATA);
set data(v: DataTableItem[]) { this.dataStream.next(v); }
get data(): DataTableItem[] { return this.dataStream.value; }

Теперь вы можете позвонить dataSource.data = newData куда угодно с любыми новыми данными, и это просто работает. Поток данных обнаруживает изменение, и таблица обновляется. Проблема была в том, что наблюдаемый this.data не обнаруживал никаких изменений. Поток данных делает.

Answer 4

Источник данных для таблицы должен быть Observable.

Пока this.data является массивом, не существует механизма, который будет уведомлять таблицу данных, когда элементы добавляются, удаляются или изменяются в массиве.