您可以將 GET 方法內的數據分配給 Angular 8 中的外部變量嗎？

Question

在下面的代碼中，我試圖將 testdata 的內容分配給 checkList 中的值。 我遇到的問題是循環開始時 checkList 未定義。 我似乎無法弄清楚如何解決這個問題，似乎無論我做什么 checkList 或 testdata 都是未定義的。

我是 Angular 的新手，我想知道這是否與 get 方法的異步屬性有關？

  masterSelect: Boolean;
  checkList: any;
  fileNames$: any;
  testdata: string[];

  constructor(private http: HttpClient) { 
    this.checkList = [
      {id:1,value:'Section1',isSelected:false},
      {id:2,value:'Section2',isSelected:false},
      {id:3,value:'Section3',isSelected:false},
      {id:4,value:'Section4',isSelected:false},
      {id:5,value:'Section5',isSelected:false},
      {id:6,value:'Section6',isSelected:false},
      {id:7,value:'Section7',isSelected:false},
    ]

    this.fileNames$ = this.http.get<any>(this.baseUrl + "Invoice/GetFileNames").subscribe(function (data) {

      this.testdata = data;
      for (let i = 0; i < this.testdata.length; i++) {
        //console.log(this.testdata[i])
        this.checkList[i].value = this.testdata[i];

      }

    }, function (error) {
      this.testdata = error;
    });

    this.masterSelect = false;

  }

Answer 1

在使用它們之前，嘗試為 arrays 分配一個空值，如下所示 -

  this.checkList = [];
  this.checkList = [
  {id:1,value:'Section1',isSelected:false},
  {id:2,value:'Section2',isSelected:false},
  {id:3,value:'Section3',isSelected:false},
  {id:4,value:'Section4',isSelected:false},
  {id:5,value:'Section5',isSelected:false},
  {id:6,value:'Section6',isSelected:false},
  {id:7,value:'Section7',isSelected:false},
]

測試數據也一樣 -

this.fileNames$ = this.http.get<any>(this.baseUrl + "Invoice/GetFileNames").subscribe(function (data) {
  this.testdata = []
  this.testdata = data;

此外，這種類型的代碼應該移動到ngOnInit而不是構造函數。 當您嘗試訪問該變量時，該變量可能不可用。

Answer 2

我認為，您可以將清單移動到訂閱中。 我的解決方案是：

constructor(private http: HttpClient) {

this.fileNames$ = this.http.get<any>(this.baseUrl + "Invoice/GetFileNames").subscribe(function (data) { 
this.checkList = [
  {id:1,value:'Section1',isSelected:false},
  {id:2,value:'Section2',isSelected:false},
  {id:3,value:'Section3',isSelected:false},
  {id:4,value:'Section4',isSelected:false},
  {id:5,value:'Section5',isSelected:false},
  {id:6,value:'Section6',isSelected:false},
  {id:7,value:'Section7',isSelected:false},
]

  this.testdata = data;
  for (let i = 0; i < this.testdata.length; i++) {
    //console.log(this.testdata[i])
    this.checkList[i].value = this.testdata[i];

  }

}, function (error) {
  this.testdata = error;
});

this.masterSelect = false;

}