Таблица материалов, не отражающая изменений в источнике данных - PullRequest
Новая
       20

Таблица материалов, не отражающая изменений в источнике данных

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

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

Я разрабатываю простое приложение на Angular 6 для отслеживания реквизитов программного обеспечения и тестов, связанных с этими реквизитами.

  • У меня есть компонент с именем RequisiteList , HTML-часть которого состоит из таблицы mat с моим массивом Requisite класса модели в качестве [dataSource]. Этот массив принимается как параметр @Input, и он также имеет параметр @Output, который является EventEmitter, который уведомляет и передает родительскому компоненту каждый раз, когда Requisite в списке щелкается.

  • Я использую RequisiteList внутри ReqListMain , который представляет собой компонент, состоящий из списка и иерархического дерева для фильтрации. Этот компонент работает нормально, показывает и фильтрует реквизиты, как и предполагалось. Этот компонент также захватывает событие @Output из списка и передает его как @Output своему родителю.

  • Наконец (для того, что связано с этим вопросом), у меня есть компонент TestView , который имеет экземпляр RequisiteList , чтобы показать реквизиты, в настоящее время связанные с текущим тестом. и экземпляр ReqListMain для добавления новых реквизитов в текущий тест (например, «браузер»). Это TestView имеет экземпляр класса модели Pectest , соответствующий тесту, который визуализируется в данный момент, который имеет массив Requisite .

Идея в этом последнем компоненте состояла в том, что всякий раз, когда щелкнул реквизит из списка «браузера», он добавлялся в список текущего теста. Для этого в методе обратного вызова, связанном с событием @Output в списке браузеров, я попытался добавить Requisite , полученный в качестве параметра: 

addrequisite(requisite: Requisite) {
this.currentTest.requisites.push(requisite);
console.log('Current test: ');
console.log(this.currentTest);
}

В HTML-части TestView я вставил компонент RequisiteList следующим образом: 

<app-requisitelist [requisites]="currentTest.requisites" ngModel name="reqlistview"></app-requisitelist>

(Свойство ngModel является частью того, что я пробовал, я не уверен, что это необходимо).

Результат:

  • Запрошенный реквизит не отображается в списке.
  • В выводе консоли я вижу содержимое объекта currentTest , и я проверяю, действительно ли выбранные реквизиты добавляются в массив реквизитов этого объекта, поэтому событие запускается, и объект передается вверх. от дочерних компонентов.

Я не уверен, что моя проблема в том, что привязка данных выполняется по значению (я так не думаю, так как я связываю массив, который является объектом AFAIK), или таблица не обнаруживает изменения данных (я пытался принудительно обнаружить изменение данных с помощью ChangeDetector) или чего-либо еще.

1 Ответ

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

Вы передаете массив компоненту app-requisitelist.Этот компонент ожидает изменения этого массива для обновления содержимого.Когда вы делаете this.currentTest.requisites.push(requisite), массив this.currentTest.requisites не изменяется, я имею в виду, если вы делаете 

const tmp = this.currentTest.requisites;
this.currentTest.requisites.push(requisite)
if (tmp === this.currentTest.requisites) {
    console.log('The arrays are the same');
}

, вы получите распечатанный журнал.Итак, я предлагаю сделать что-то подобное: 

addrequisite(requisite: Requisite) {
    this.currentTest.requisites.push(requisite);
    this.currentTest.requisites = this.currentTest.requisites.map(item => item);
    console.log('Current test: ');
    console.log(this.currentTest);
}

Вставленная строка заставляет this.currentTest.requisites быть новым массивом с тем же содержимым.

...