为什么我通过绑定传递的数据未定义？答案

【问题标题】：why my data passed by binding stay undefined?为什么我通过绑定传递的数据未定义？
【发布时间】：2020-06-26 10:26:42
【问题描述】：

我有一组 JSON 数据，我尝试在 ngfor 中一个一个地传递它们，以在另一个组件中显示数据，但是当我这样做时，我有一个错误 X 未定义。第一个组件

import { Component, OnInit } from '@angular/core';

const data= [{
  "_id": {
    "$oid": "5ef3493e7322c93b9cc6fdf7"
  },
  "name": "TP python 1",
  "coefTP": 0,
  "date": {
    "$date": "2020-01-23T00:00:00.441Z"
  }
},{
  "_id": {
    "$oid": "5ef354dd7322c93b9cc6fdfa"
  },
  "name": "TP python 2",
  "coefTP": 1,
  "date": {
    "$date": "2020-01-23T00:00:00.441Z"
  }
}];

@Component({
  selector: 'app-my-tps',
  templateUrl: './my-tps.component.html',
  styleUrls: ['./my-tps.component.css']
})
export class MyTPsComponent implements OnInit {
  tpList : any[] = data;
  constructor() { }

  ngOnInit(): void {

  }

}

<h1 class="text-center display-1">My TPs</h1>
<hr class="w-25">
<div class="bg-light ml-5">
    <div class="container">
      <div class="row">
        <app-tp-item *ngFor="let tp of tpList" [sendtp]="tp" class="col-md-6 col-lg-3 col-xs-8">
        </app-tp-item>
      </div>
    </div>
  </div>

第二个组件

import { Component, OnInit, Input } from '@angular/core';
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

@Component({
  selector: 'app-tp-item',
  templateUrl: './tp-item.component.html',
  styleUrls: ['./tp-item.component.css']
})
export class TpItemComponent implements OnInit {

  @Input() sendtp: JSON;
  public readonly nom:string;
  public readonly date:string;
  public readonly coeff:number;
  public readonly id:string;

  constructor() {
    this.nom=this.sendtp['name'];
    this.date=this.sendtp['date'];
    this.coeff=this.sendtp['coefTP'];
    this.id=this.sendtp['_id'];
  }
}

the html part only shows:
    this.nom;
    this.date;
    this.coeff;
    this.id=this;

错误表明在第二个组件中

@Input() sendtp: JSON; //

我想知道为什么它没有定义，你能帮我吗？

【问题讨论】：

标签： angular typescript data-binding

【解决方案1】：

您在构造函数中分配了导致未定义的值。在 Angular 生命周期中，最初会调用构造函数。所以最好在 ngOnInit() 中分配它。

添加了工作 stackblitz link

【讨论】：

【解决方案2】：

Constructor 在创建组件实例时起作用（与其他编程语言一样）。

ngOnInit在组件数据绑定后生效。

此外，您正试图通过constructor 与他们联系，因此它必须是未定义的，因为数据（或道具）尚未绑定。

要解决问题，您需要通过 ngOnInit 生命周期与他们联系

export class TpItemComponent implements OnInit {

  @Input() sendtp: JSON;
  public nom:string;
  public date:string;
  public coeff:number;
  public id:string;

  ngOnInit() {
    this.nom=this.sendtp['name'];
    this.date=this.sendtp['date'];
    this.coeff=this.sendtp['coefTP'];
    this.id=this.sendtp['_id'];
  }
}

查看这里以获取有关Angular Lifecycle的更多信息

【讨论】：