Angular PrimeNG 面包屑不动态变化

Question

面包屑组件

import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/api';
import { BreadcrumbsService } from './breadcrumbs.service';

@Component({
  selector: 'app-breadcrumbs',
  templateUrl: './breadcrumbs.component.html',
  styleUrls: ['./breadcrumbs.component.scss'],
})
export class BreadcrumbsComponent implements OnInit {
  home: MenuItem = { icon: 'pi pi-home', routerLink: '/' };
  items: MenuItem[] = [];

  constructor(
    private service: BreadcrumbsService,
  ) {}

  ngOnInit(): void {
    this.service.items.subscribe((arr: MenuItem[]) => {
      this.items = arr;
      console.log(this.items);
    });
  }
}

在控制台日志中，我可以看到添加了新项目，但 HTML 中的面包屑导航没有更新。

HTML

<p-breadcrumb styleClass="border-none mr-4" [model]="items" [home]="home"></p-breadcrumb>

P.S：当我在 HTML 中尝试使用简单的 ngFor 时，我可以看到添加了新项目。

Answer 1

使用 spread operator 分配 this.item。

ngOnInit(): void {
    this.service.items.subscribe((arr: MenuItem[]) => {
      this.items = arr;
      this.items = [...this.items];
    });
  }

Angular PrimeNG 面包屑不动态变化

Angular PrimeNG Breadcrumbs not changing dynamically

breadcrumbs

rxjs

primeng

angular