ngOninit запускается только один раз - форма не обновляется - PullRequest
Новая
       41

ngOninit запускается только один раз - форма не обновляется

2 голосов
/ 14 января 2020

У меня есть контейнер материала sidenav со списком навигации по материалам: 

<mat-sidenav-container class="cont">
            <mat-sidenav #drawer mode="side" opened role="navigation">
                <mat-nav-list>
                    <table>
                        <tr *ngFor = "let thing of values">
                            <td>
                                <button [class.selected]="thing === selectedThing" (click) = "onSelectedThing(thing)">{{thing.Date}}</button> 
                            </td>
                        </tr>
                    </table>
                </mat-nav-list>
            </mat-sidenav>
            <mat-sidenav-content>

                    <app-thing [thing] = "selectedThing"></app-thing>

            </mat-sidenav-content>
        </mat-sidenav-container>

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

В компоненте I have: 

<div>
        <app-add-costs [thingIDCost]="thing.thingId" 
        [Date1] = "thing.Date1" 
        [Date2] = "thing.Date2">
        </app-add-costs>
</div>

Итак, у меня есть другой компонент, куда я отправляю параметры, представленные в форме. Компонент app-add-cost выглядит следующим образом: 

export class AddCostsComponent implements OnInit {
  @Input() thingIDCost: number;
  @Input() Date1: string;
  @Input() Date2: string;

  myForm: FormGroup;

  constructor(private srv: HttpserviceService, private router: Router, private location: Location, private fb: FormBuilder) {
  }

  ngOnInit() {
    this.myForm = this.fb.group({
      Date1: [this.Date1, [Validators.required]],
      Date2: [this.Date2, [Validators.required]]
      }, {
        validator: this.validateDates
      }
      ),
  }
}

И в HMTL я просто отображаю его в форме: 

<form [formGroup]="myForm" (submit)="sendDates()">
<table align="right">
    <tr>
        <td>
                Date1
        </td >
        <td>
            <mat-form-field>
                <input matInput type="datetime-local" formControlName="Date1">
            </mat-form-field>
        </td>
    </tr>
    <tr>
        <td>
                Date2
        </td>
        <td>
            <mat-form-field>
                <input matInput type="datetime-local" formControlName="Date2">
            </mat-form-field>
        </td>
    </tr>
</table>
</form>

И проблема в том, что значения Date1 и Date2 не меняются когда я нажимаю через список навигации. Они продолжают удерживать первые значения (от первого элемента из списка).

Я также замечаю, что в консоли я вижу, что OnInit запускается только один раз.

Как сделать значения видимыми когда я перемещаюсь по списку?

Ответы [ 2 ]

1 голос
/ 14 января 2020

замените ngOnInit на ngOnChanges, чтобы он срабатывал при изменении входных данных. 

export class AddCostsComponent implements OnChanges{
  @Input() thingIDCost: number;
  @Input() Date1: string;
  @Input() Date2: string;

  myForm: FormGroup;

  constructor(private srv: HttpserviceService, private router: Router, private location: Location, private fb: FormBuilder) {
  }

  ngOnChanges() {
    this.myForm = this.fb.group({
      Date1: [this.Date1, [Validators.required]],
      Date2: [this.Date2, [Validators.required]]
      }, {
        validator: this.validateDates
      }
      ),
  }
}
0 голосов
/ 14 января 2020

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

...