Блог

Главная - Вопросы по программированию - Массив становится неопределенным после перезагрузки страницы

Массив становится неопределенным после перезагрузки страницы

#angular #typescript #http #rxjs

Вопрос:

Я работаю над Angular WebAPI. У меня есть ответ базы данных на локальном хосте в формате JSON. Когда я запускаю свое приложение, я вижу массив oData . Но когда я перезагружаю страницу, она oData становится неопределенной.

Как я могу решить эту проблему?

Вот мой код из файла .ts:

   ngOnInit(): void {

    this.mydataser.getDbData().subscribe(data => {
      this.oData = data;
    });
  }

 public importData() {
    console.log(this.oData)
 }

Вот моя услуга:

   getDbData(): Observable<DataFactory[]> {
    return this.http.get<DataFactory[]>("https://localhost:44216/api/dbdata");
  }

P.S. Я пытался использовать localstorage, но это не работает.

Комментарии:

1. Пожалуйста, приведите минимально воспроизводимый пример.

Ответ №1:

Объявите данные как пустой массив; если вы этого не сделаете, они будут неопределенными до тех пор, пока ответ API не будет завершен. Если вы хотите знать, когда на самом деле придет ответ, просто нажмите. Поэтому, если вы хотите позвонить importData() после получения ответа API, вызовите this.importData() метод внутри subscribe , например

 // declare as empty array
oData = [];
buttonEnabled = false;

ngOnInit(): void {
    this.mydataser.getDbData().pipe(
        tap(d => this.buttonEnabled = true)
    ).subscribe(data => {
        this.oData = data;
    });
}

importData(): void{
 console.log(this.o.Data);
}

В шаблоне:

 <button [disabled]="!buttonEnabled">Import</button>

Комментарии:

1. да, потому что в то время, когда вы это делаете console.log(o.Data) , ответ еще не был получен через getDbData()

2. Вызовите importData() метод внутри subscribe , поэтому всякий раз, когда API будет завершен, вы получите данные внутри o.Data и o.Data будете иметь данные в importData методе

3. Спасибо. Это работает, но я хочу получать OData только при вызове метода ImportData (), а не каждый раз при загрузке страницы. У меня есть кнопка, которая вызывает ImportData (), а затем вносит некоторые изменения в OData. Есть ли способ вызвать ImportData() не в ngOnInit()?

4. Если вы хотите внести некоторые изменения в oData данные, их следует загрузить по адресу ngOninit . затем вы можете изменить oData по нажатию кнопки

5. Поправьте меня, если я ошибаюсь.. Вы хотите установить o.Data из this.mydataser.getDbData() в ngOninit , но вы хотите изменить o.Data , в importData() котором вызывается щелчок по кнопке?

Метки: