Как в компоненте отследить изменение @Input переменной?

Question

[andreys75]

Добрый день,
Есть компонент, у него входной параметр
@Input() SafetyIncidents: Array<SafetyIncident>;

В компоненте элементы этого массива связаны с формой например так

<mat-form-field class="col-md-1">
        <input name=SafetyIncidentImpactId [(ngModel)]="Incident.ImpactId" matInput placeholder="Impact ID">
</mat-form-field>

Но так же могут добавляться новые элемента массива через код:

addSafetySection() {
      this.SafetyIncidents.push(new SafetyIncident());
    //  console.log("add new incedent");
  }

Как отслеживать изменения массива SafetyIncidents?

Увы не смог найти вразумительного примера ни с subject ни с observable. Проблема в том, что форма связана именно с SafetyIncidents, который не является observable.

Comments

[andreys75]

увы пока получилось решить полностью задачу только добавив (change) каждому input элементу

<div *ngFor="let Incident of SafetyIncidents; let index = index">
      <mat-checkbox  name="SelectForMorningReport"
                    [(ngModel)]="Incident.SelectForMorningReport"
                    (change)="isChanged(Incident)">
      </mat-checkbox>
      <mat-form-field class="col-md-1">
        <input name=SafetyIncidentImpactId [(ngModel)]="Incident.ImpactId" matInput placeholder="Impact ID"
        (change)="isChanged(Incident)">
      </mat-form-field>
      <mat-form-field class="col-md-2">
          <mat-label>Incident level</mat-label>
          <mat-select [(value)]="Incident.IncidentLevel" [compareWith]="compareObjects" (selectionChange) = "isChanged(Incident)">
            <mat-option>--</mat-option>
            <mat-option *ngFor="let level of incidentLevels" [value]="level">{{level.Title}}</mat-option>
          </mat-select>
        </mat-form-field>
      <mat-form-field class="col-md-4">
        <mat-label>Incident description</mat-label>
        <textarea name="IncidentDescription"
                  [(ngModel)]="Incident.Description"
                  (change)="isChanged(Incident)"></textarea>
      </mat-form-field>
      <mat-form-field >
        <mat-label>Actions taken</mat-label>
        <textarea name="ActionsTaken"
                  [(ngModel)]="Incident.ActionsTaken"
                  (change)="isChanged(Incident)">
        </textarea>
      </mat-form-field>

Мне такое решение очень не нравится слишком много повторяющегося кода :( Но пока ни как не могу придумать как отслеживать такие изменения в классе компонента без вызова функции isChange из шаблона

Answer 1

[Антон Швец]

в документации все есть
https://angular.io/guide/component-interaction#int...

А, и еще

addSafetySection() {
      this.SafetyIncidents = this.SafetyIncidents.concat(new SafetyIncident());
    //  console.log("add new incedent");
}

Comments

[andreys75]

Добрый день Антон!

Увы пока так и не смог решить задачу :(

private _SafetyIncedents: Array<SafetyIncident>

  @Input()
   set SafetyIncidents(SafetyIncidents: Array<SafetyIncident>){
     this._SafetyIncedents = SafetyIncidents;
     console.log('\n from safetyincedent changes');
   }
   get SafetyIncidents(): Array<SafetyIncident> {
    return this._SafetyIncedents;
   }

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


Конечно, я могу на каждое поле формы навесить onChange, но это как то коряво выглядит...

[Антон Швец]

andreys75, вот вам сразу два способа, как отследить появление изменений в шаблонной форме
С помощью директивы ngForm которая накладывается Ангуляром на любые формы и с помощью штатного всплытия события.
https://ng-run.com/edit/i8hZqpKqt2Die12Vkj3f

А вообще надо не морочиться ерундой, а сделать реактивную форму, по сути тоже самое, но код понятнее.

А на исходный вопрос "Как в компоненте отследить изменение @Input переменной?" я уже ответил

[andreys75]

Добрый день,

Спасибо за совет и пример!
Да я понимаю что лучше переделать все формы на реактивные, просто это много работы, и буду убеждать компонент оунера, что это нужно делать :)