Angular：將數據從父級傳遞給子級，輸入未定義

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仍未定義。

一個快速的解決方法是在你的 login.component class 中初始化如下status ：

status: Status = {
   message: ''
}