Angular 12 个动态用户数据

Question

我正在尝试将自己从 knockoutjs 转换过来，但我正在努力了解 data/observables 在 angular 12 中的工作方式。

我希望能够使用来自服务的一些数据预填充一个数组，但也能够让用户在页面上添加该数据。使用 observables 我如何从 kockout 中知道它们似乎是不可能的。

我的代码确实显示了来自服务的数据，但是当我单击按钮时 UI 没有改变。我错过了什么才能让这一切发生？

import { Component, OnInit } from '@angular/core';
import { List } from '../_models/list.model';
import { ListService } from '../_services/list.service';

@Component({
  selector: 'app-list-admin',
  templateUrl: './list-admin.component.html',
  styleUrls: ['./list-admin.component.less']
})
export class ListAdminComponent implements OnInit {

  lists?: List[];

  constructor(private listService: ListService) { }

  ngOnInit(): void {
    this.listService.getLists().subscribe(res => {
      this.lists = res.lists;
    });
  }

  testEvent(): void {
    this.lists?.push({
      name: "test",
      id: "test"
    });
  }
}

<div *ngFor="let list of lists">
    {{ list.name }}
</div>

<button (click)="testEvent()">test</button>

Answer 1

Angular 没有看到数组和对象的变化。

您可以使用：

this.lists = [...this.lists, {
      name: "test",
      id: "test"
}];

Angular 12 个动态用户数据

Angular 12 Dynamic User Data

angular

angular-observable