ngOninit 只运行一次 - 表单不更新

Question

我有 material 带有 material 导航列表的 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>

当我点击按钮时，我将发送到应查看的应用程序组件元素。

在组件中我有：

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

所以我有另一个组件，我在其中发送在表单中公开的参数。 app-add-costs 组件如下所示：

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 仅运行一次。

如何在列表中移动时看到值？

Answer 1

将 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
      }
      ),
  }
}

Answer 2

你应该将组件的值传递给另一个想法的EventEmitter，所以当你点击列表项时，你调用了一个函数来发出一个事件，然后你将在父组件中接收它然后将它传递给另一个子组件。

ngOninit 只运行一次 - 表单不更新

ngOninit runs only once - form is not updated

forms

angular-material

ngoninit

angular