Angular 11中如何將一個數組的長度賦值給一個數字類型的變量？

Question

所以這是我的問題，我的app.component.ts上有這個：

@Component({
selector: 'sa-app',
templateUrl: './app.component.html',
})
export class AppComponent implements OnInit, AfterViewInit {

numberEditing: number = 0;

 constructor(
private measureService: MeasureService,
) {}

ngAfterViewInit() {
 this.editing()
}

editing() {
    this.medidorService.getEditing().subscribe(editingProcess => this.numberEditing = editingProcess.length) // if I console.log(editingProcess.length) I do get the number correctly.
    console.log(this.numberEditing) // UNDEFINED
    this.test(this.numberEditing)
  }

 test(numberEditing) {
   console.log(numberEditing) // UNDEFINED
 }

每當我使用 console.log(editingProcess.length) 時，我都會得到我想要分配給的數字

this.numberEditing,

但是，如果我在分配后控制台記錄 this.numberEditing，它始終是未定義的。

我嘗試將this.measureService.getEditing().subscribe(editingProcess => this.numberEditing = editingProcess.length)移動到構造函數內部，結果是一樣的。 我嘗試將 this.numberEditing 制作成一個數組或一個 object 並且 object 變空並且該數組不起作用，我得到：

Type 'Measure[]' is not assignable to type '[]'.
  Target allows only 0 element(s) but source may have more.

我想在數據圖表中使用numberEditing中的值，所以我需要能夠將值保存在變量中並在獲取后使用它，就在component.ts中，HTML不會被使用。

我知道我正在使用一個可觀察對象，所以當我在 editingProcess.length 上獲得值時，其他所有內容都已經加載。

---

但是，我如何讓變量或調用變量的 function 等待這種情況發生，然后才賦值？

---

整個服務不是我做的，但我可以訪問和查看它，它確實返回了一些東西，它確實返回了我想要的數組以及其中的項目，我 100% 確定問題出在我這邊。

Answer 1

當您訂閱一個 observable 時，運行的代碼是異步的，這意味着它將在未來某個時間運行，外部 console.log 首先運行，因為它是同步的。

numberEditing = 0;

editing(): void {
  this.medidorService.getEditing().subscribe((v) => {
    this.numberEditing = v;
    console.log('inside subscribe: ', this.numberEditing)
  });
  console.log('outside subscribe', this.numberEditing)
}

output 將是：

 //outside subscribe 0
 //inside subscribe: 100

即使外部控制台日志在訂閱之后，外部控制台日志也會先執行。

在獲得getEditing()之后需要處理的任何事情都在subscribe的實例內部進行，而不是在外部。

Answer 2

這是由於異步。

嘗試使用：異步/等待。

在您的情況下，我拆分為 getData() 方法以首先獲取數據：

async getData() {
       return new Promise((resolve, reject) => {
          this.medidorService.getEditing().subscribe(editingProcess => this.numberEditing = editingProcess.length)
       })}

之后，使用 await 獲取數據：

    editing() {
        this.numberEditing = await getData();
        console.log(this.numberEditing)
        this.test(this.numberEditing)
      }

希望對您有所幫助。