Angular：将数据从父级传递给子级，输入未定义答案

【问题标题】：Angular: Passing data from parent to child with input undefinedAngular：将数据从父级传递给子级，输入未定义
【发布时间】：2019-10-12 21:25:36
【问题描述】：

我创建了一个带有错误信息的弹出框组件（如果有错误）。

目前我有一个界面。

status-message.ts

export interface Status {
  message: string;
}

login.component.ts（父母）

import { Status } from '../interfaces/status-message';

export class LoginComponent implements OnInit {
  statusFailed: boolean = false;
  status: Status;

  login() {
    this.authService.login(formData).subscribe(
      (res) => {
        if (res.status === 'sucsess') {
          console.log('success');
        } else if (res.status = 'failed') {
           this.statusFailed = true;
           this.status.message = res.message
        }
      }
    )
  }
}

login.component.html

<app-info-box *ngIf="statusFailed" [ngClass]="{ 'error-box': statusFailed}" [status]="status"></app-info-box>

info-box.component.ts（孩子）

import { Status } from '../interfaces/status-message';

export class InfoBoxComponent implements OnInit {
  @Input() status: Status;
}

info-box.component.html

<span> {{status}} </span>

每当我运行它时，我都会收到一个错误，core.js:6014 ERROR TypeError: Cannot set property 'message' of undefined 并且子组件不显示任何文本，但会显示样式。我怎样才能得到这个工作？谢谢

【问题讨论】：

标签： angular typescript angular-input

【解决方案1】：

您忘记初始化status，因此当您尝试执行this.status.message = res.message 时，它会抛出错误，因为status 仍未定义。

一个快速的解决方法是在你的 login.component 类中初始化status：

status: Status = {
   message: ''
}

【讨论】：