Массивы привязки свойств Angular5 с @Input

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

Вот мой код:

child1.component.ts (источник)

@Output() adminAdded = new EventEmitter<Array<AdminDetails>>();
...
setAdminStatus(index: number, status: string): void {
  this.admins[index].status = status;
  this.adminAdded.emit(this.admins);
}

parent.component.ts

onAdminAdded(adminDetails: Array<AdminDetails>): void {
  Object.assign(this.adminDetails, adminDetails]);
}

parent.component.html

<child1-component (adminAdded) = "onAdminAdded($event)"></child1-component>
<child2-component [admins] = "adminDetails"></child2-component>

child2.component.ts

adminMails: string[];
@Input() set admins(admins: Array<AdminDetails>) {
    if (!admins) {
        return;
    }
    adminMails = admins.filter(x => x.status === 'Active').map(x => x.email);
}

а здесь я показываю электронные письма активных админов. Проблема в том, что изменение распространяется только на родительский компонент. Точка останова на Object.assign срабатывает, но не в сеттере.

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

Структурированный массив Numpy
Структурированный массив Numpy
Однако в реальных проектах я чаще всего имею дело со списками, состоящими из нескольких типов данных. Как мы можем использовать массивы numpy, чтобы...
T - 1Bits: Генерация последовательного массива
T - 1Bits: Генерация последовательного массива
По мере того, как мы пишем все больше кода, мы привыкаем к определенным способам действий. То тут, то там мы находим код, который заставляет нас...
Что такое деструктуризация массива в JavaScript?
Что такое деструктуризация массива в JavaScript?
Деструктуризация позволяет распаковывать значения из массивов и добавлять их в отдельные переменные.
0
0
182
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

Редактировать

Как уже говорилось, если вы беспокоитесь о том, что DoCheck вызывается слишком часто, создание полностью нового объекта и переназначение его вашему свойству input должно помочь, поскольку ссылка будет другой.

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

Tamás Szabó 19.04.2018 11:17

Если вы беспокоитесь о том, что DoCheck вызывается слишком часто, создание совершенно нового объекта и переназначение его вашему свойству input должно помочь, поскольку ссылка будет другой.

bugs 19.04.2018 11:31

@bugs Не могли бы вы отредактировать это в ответ, чтобы я мог согласиться?

Tamás Szabó 19.04.2018 11:35

@AnandG Спасибо, но я не хочу вводить совершенно новую услугу и накладные расходы на использование наблюдаемого только для отслеживания массива.

Tamás Szabó 19.04.2018 11:37

Отредактировал ответ

bugs 19.04.2018 11:39

Другие вопросы по теме