添加时现在会显示新内容（角度）

Question

我有 app.component、post-create.component 和 post-list.component。 app.component.html 看起来像这样： app.component.html

<app-header></app-header>
<main>
<app-post-create (postCreated)="onAddedPost($event)" ></app-post-create>
<app-post-list [posts]="storedPosts" ></app-post-list>
</main>

post-list.component.ts 看起来像这样post-list.component.ts

import { Component, Input } from '@angular/core';
import { Post } from '../post'
@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.css']
})
export class PostListComponent  {

  @Input() posts:Post[] = [];

}

post-create.component.ts 看起来像这样post-create.component.ts

import { sharedStylesheetJitUrl } from '@angular/compiler';
import { Component, EventEmitter, Injectable, Output, OutputDecorator } from '@angular/core';
import { Post } from '../post'
@Component({
  selector: 'app-post-create',
  templateUrl: './post-create.component.html',
  styleUrls: ['./post-create.component.css']
})
export class PostCreateComponent {
  enteredContent='';
  enteredTitle='';
  @Output() postCreated: EventEmitter<Post> = new EventEmitter<Post>();
  onAddPost(){
    const post={title:this.enteredTitle,content:this.enteredContent};
    this.postCreated.emit(post);
  }
}

app.component.ts 看起来像这个app.component.ts

import { Component, Output,Input } from '@angular/core';
import { Post } from '../app/posts/post';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],

})
export class AppComponent {
  storedPosts: Post[] = [];
  onAddedPost(post:Post){
    this.storedPosts.push(post);
  }
 }

问题是当我按下添加帖子时，它不会显示新帖子。 有任何想法吗？ 编辑：也是我的 post.create.component.html 看起来像这个post.create.component.html

<mat-card>
  <mat-form-field>
    <input matInput type="text" [(ngModel)]="enteredTitle">
  </mat-form-field>
  <mat-form-field>
  <textarea matInput rows="6" [(ngModel)]="enteredContent"></textarea>
  </mat-form-field>
  <button mat-raised-button
  (click)="onAddPost()">Save post!</button>
  </mat-card>

并且 post-list.component.html 看起来像这样：

<mat-accordion multi="true" *ngIf="posts.length>0" >
  <mat-expansion-panel *ngFor="let post of posts">
    <mat-expansion-panel-header>
      {{post.title}}
    </mat-expansion-panel-header>
        {{post.content}}
  </mat-expansion-panel>
</mat-accordion>
<p class="mat-body-1" *ngIf="posts.length <=0">no posts added yet</p>

Answer 1

Angular 的@Input仅在基础引用已调整的情况下才能识别对其变量的更改。 由于Array#push不影响它的持有变量，它们可能不会被检测到。 而不是Array#push您可以使用扩展语法append 新元素。

尝试以下

onAddedPost(post:Post){
  this.storedPosts = [...this.storedPosts, post];
}

使用ngOnChanges()钩子检查@Input更改

您可以使用ngOnChanges挂钩检查是否在子组件中检测到更改。 尝试以下

import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";
import { Post } from "../post";
@Component({
  selector: "app-post-list",
  templateUrl: "./post-list.component.html",
  styleUrls: ["./post-list.component.css"]
})
export class PostListComponent implements OnChanges {
  @Input() posts: Post[] = [];

  ngOnChanges(changes: SimpleChanges) {
    if (changes.posts && changes.posts.currentValue) {
      console.log(changes.posts.currentValue);
    }
  }
}

我已经修改了您的Stackblitz 。

Answer 2

我认为这与更改检测有关，并且 arrays 是引用类型，因此您必须更改 memory 中存储数组的位置，以保证更改检测运行。

import { Component, Output,Input } from '@angular/core';
import { Post } from '../app/posts/post';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],

})
export class AppComponent {
  storedPosts: Post[] = [];
  onAddedPost(post:Post){
    // the line below does not change the location of the array in memory and 
    // therefore change detection doesn't run
    // this.storedPosts.push(post);  
    // update this way, spread the old posts and append the new post
    // and this will assign storedPosts in a new location in the array.
    this.storedPosts = [...this.storedPosts, post];
  }
 }