代码之家 › 专栏 › 技术社区 › bizzehdee

动态用户数据

angular-observable angular

0

bizzehdee · 技术社区 · 4 年前

我试图将自己从knockoutjs中转换过来,但我正在努力解决动态数据/观测值在angular 12中的工作方式。

我希望能够使用服务中的一些数据预填充数组,但也能够让用户在页面上添加这些数据。使用我从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>

1 回复 | 直到 4 年前

1

Piva Gregory 4 年前

角度看不到数组和对象中的更改。

你可以使用:

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