Перенос данных строки между двумя таблицами в угловом формате с использованием углового материала

Question

Я создал образец углового приложения, в котором я взял TableComponent в качестве главной страницы, а также у меня есть всплывающее окно в TableComponent.

Когда я нажимаю кнопку OpenPopup в моемНа главной странице я получаю всплывающее окно с двумя таблицами.

Первая таблица содержит список строк данных, а вторая таблица пуста.Когда я перенесу строки из моей первой таблицы во вторую таблицу и нажму кнопку save , строки данных из второй таблицы отобразятся в таблице главной страницы.

Но моя проблема заключается в том, что яя открываю всплывающее окно во второй раз, вторая таблица не показывает ранее выбранные строки и пуста.

Пожалуйста, зайдите в мой образец приложения здесь ..

canкто-нибудь, пожалуйста, предложите мне, что мне здесь не хватает ...?

Answer 1

ELEMENT_DATA - это CONST вне области действия класса OpenPopup, поэтому, когда вы завершаете слияниеstate.

Класс OpenPopup создается каждый раз, когда вы открываете всплывающее окно, и, поскольку вы делаете следующее, вы повторно инициализируете selectedDataSource как [] при открытии всплывающего окна.

 checkedData = [];
 checkedDataSource = new MatTableDataSource<Element>(this.checkedData);

Редакция:

Вам нужно будет скопировать ELEMENT_DATA для проверенных данных.

• Добавление следующего в ваш пример стекаблита работает.

  const ELEMENT_DATA: Element[] = [
  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
  { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
  { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
  { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' }
  ];
  
  const CHECKED_DATA: Element[] = [];
  

Затем в вашем классе OpenPopup

checkedData = Object.assign(CHECKED_DATA);