角度:在未定义输入的情况下将数据从父级传递到子级

Question

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

目前我有一个界面。

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子组件不显示文本，但显示样式。 我怎样才能让它工作？ 谢谢

Answer 1

你忘记初始化status所以当你尝试做this.status.message = res.message时，它会抛出错误status因为仍然没有定义。

一个快速的解决方法是初始化status，如下所示 login.component 类：

status: Status = {
message: ''
}