Question

因此，假设您在服务中有一组对象

export class DataService {

  private _dataSources : Array<DataSource>

  contructor(private callerService: CallerService){
    this._dataSources = this.callerService.getDataSources(); // getting data from another service
  }

  // getter for _dataSources
  get dataSources(): Array<Datasource> {
    return this._dataSources;
  }
}

我想在我们称之为“DataComponent”的组件的for循环中使用dataSources数组

@Component({
  selector: 'data-component',
  template: `
       <div *ngFor="let dataSource of dataService.dataSources"></div> // one way
       <div *ngFor="let dataSource of dataSources"></div> // other way
     `,
  styleUrls: ['./data.component.css']
})
export class DataComponent implements OnInit {

  public dataSources: Array<DataSource>

  constructor(public dataService: DataService) { }

  ngOnInit() { 
   this.dataSources = this.dataService.dataSources(); 
  }

所以这里的问题是，执行for循环的最佳方法是什么，考虑：

DataSources可以是多个数据表的非常大的对象（如excel工作簿）
其他人必须易于理解代码

是否有任何性能优势，Angular的常见做法是什么？

我知道this.dataSources = this.dataService.dataSources();实际上只是内存中的指针，所以这不会导致任何性能差异吗？

Answer 1

<div *ngFor="let dataSource of dataSources"></div>

的效果可以忽略不计，因为dataService不需要检查变化检测，dataSources每次都不需要调用{get}函数。

如果在组件或其子组件中多次使用dataService.dataSources，则dataSources组件属性可以使代码保持较差且更易读。

在其他方面，没有区别。

在Angular组件中为服务变量使用typescript getter或local变量

1 个答案: