Angular 不會在 Input() 更改時重新呈現

Question

無論我做什么 angular 都不會檢測到會談陣列的變化。 我有一個handleSubmit function 來發送工具欄。 工具欄使用它將更改從輸入字段發送到父級。

我的 app.component.ts 文件

import { Component, Type, OnChanges, SimpleChanges } from '@angular/core';
import { getResponse } from '../api/API';

declare module '../api/API' {
  export interface NlpAPI {
    getResponse(data: any): Promise<any>;
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnChanges {
  talks: string[];
  title: string;
  ngOnChanges(changes: SimpleChanges): void {
    console.log(changes);
  }
  constructor() {
    this.talks = [];
    this.title = 'Talks';
  }
  ngOnInit() {
    this.talks.push('Welcome to ProjectX! How can I help you?');
    this.talks.push('I am a chatbot. I can help you with your queries.');
  }
  handleSubmit(data: any): void {
    this.talks.push(data.talk);
  }
  messageResponse() {
    // @ts-ignore: Object is possibly 'null'.
    const x = document.getElementById('txt').value;
    // @ts-ignore: Object is possibly 'null'.
    document.getElementById('output').innerHTML =
      'Your message is ' + '"' + x + '"';
  }
}

我的 app.component.html

<!-- Toolbar -->
<app-custom-toolbar [handleSubmit]="handleSubmit"></app-custom-toolbar>

<!-- Highlight Card -->

<app-text-area [talksFromUser]="talks" [title]="title"></app-text-area>
<!-- Bottombar -->
<router-outlet></router-outlet>

我的 text-area.component.ts 文件

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-text-area',
  templateUrl: './text-area.component.html',
  styleUrls: ['./text-area.component.css'],
})
export class TextAreaComponent implements OnChanges {
  @Input() talksFromUser: string[] = [];
  @Input() title: string = '';
  constructor() {}
  ngOnChanges(changes: SimpleChanges): void {
    console.log(changes);
  }
}

我的 text-area.component.html

<div class="main-text-area">
  <div *ngFor="let item of talksFromUser">{{ item }}</div>
</div>

自定義工具欄.component.ts 文件

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

@Component({
  selector: 'app-custom-toolbar',
  templateUrl: './custom-toolbar.component.html',
  styleUrls: ['./custom-toolbar.component.css'],
})
export class CustomToolbarComponent implements OnInit {
  talks: string[] = [];
  @Input() handleSubmit!: (args: any) => void;
  constructor() {}
  ngOnInit(): void {}
  onSubmit(f: NgForm) {
    this.handleSubmit(f.value);
    f.resetForm();
  }
}

我也試過 this.talks = [...this.talks, data.talk] 謝謝大家。

Answer 1

您的代碼中有兩個問題：

• 第一個，你正在調用handleSubmit("string") （所以data是一個字符串），但是你正在推送data.talk ，它是未定義的（所以talks將是[undefined, undefined, ...] ）。 要修復它，請使用data ：

handleSubmit(data: any): void {
    this.talks.push(data); // use "data" instead of "data.talk"
}

• 第二個，您正在使用AppComponent方法進入CustomToolbarComponent class。 您需要保留 AppComponent 的this AppComponent 。 此外，您應該使用箭頭函數：

handleSubmit = (data: any): void => {
    this.talks.push(data);
}