Angular *ng用于直接从服务访问数组

Question

目前我正在从我的 Angular 应用中的多个模板访问动态数组。这是一个示例：

array.service.ts

@Injectable()
export class ArrayManagerService {
    public arrayDynamic = [];
    ...
    // some functions calling the api to update dynamic data
}

数组-displayer.component.ts

@component({
    selector: 'app-array-displayer',
    templateUrl: 'array-displayer.component.html'
})
export class ArrayDisplayerComponent {
    constructor(public arrayManagerService: ArrayManagerService) {}
}

数组-displayer.component.html

<div id="array-container">
    <div class="item" *ngFor="let item of arrayManagerService.arrayDynamic">
        {{item.name}}
    </div>
</div>

我想知道这是否是一种可接受的方式（主要是关于性能），或者我是否应该在 array-displayer.component.ts 中声明一个数组并使用 EventEmiter 来每次更新数组时更新它。

Answer 1

我认为从你的服务中你应该 return 一个 observable 并且你的组件你必须继续听它示例：

    @Injectable()
    export class ArrayManagerService {
        public arrayDynamic = [];
        public bSubject$ = new BehaviourSubject(this.arrayDynamic);
        // some functions calling the api to update dynamic data
        setData(a){
     this.arrayDynamic.push(a);
     this.bSubject$.next(this.arrayDynamic);
         }
    }



export class ArrayDisplayerComponent implements OnInit {
    constructor(public arrayManagerService: ArrayManagerService) {}
   ngOnInit(){
    this.arrayManagerService.bSubject$.subscribe(arrData => {
     //this.yourArray = arrData;
   });

   }

}

Angular *ng用于直接从服务访问数组

Angular *ngFor accessing array directly from service

angular

performance

ngfor