如何监听输入数组长度的变化

Question

我做了一个

MenuComponent

组件，我想感觉到

list

长度发生了变化，然后做一些类似请求的事情。

import { Component, EventEmitter, Input, Output } from '@angular/core';

type List = {username:string}[]

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss']
})
export class MenuComponent {
  @Input() list:List = []
  @Output() listChange = new EventEmitter<List>()
}

当我调用

add

组件的

AppComponent

方法时，

MenuComponent

不知道

你怎么让

MenuComponent

知道？

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <button (click)="add()">button</button>
  <app-menu [(list)]="list"></app-menu>
  `,
})
export class AppComponent {
  list = [
    { username: "foo" }
  ]

  add() {
    this.list.push({ username: "bar" })
  }
}

Answer 1

你不能，这就是不变性存在的原因。

当改变你的数据时，你应该总是创建一个新数组而不是仅仅推送它。