时间戳

首页 > 解决方案 > 从 HTTP 请求获取数据到模板的后期

angular - 从 HTTP 请求获取数据到模板的后期

问题描述

我有一项服务，其中为主题和行为主题创建了 http 请求。然后我从服务获取数据到 page.ts（在构造函数上）以在模板中显示它。

我所做的代码运行良好，但问题是模板“大喊”来自主题的数据尚未到达。因此，如果我想用它来初始化 FORM 控件或显示数组中的数据，它会给我错误。

PS：我尝试了一个behaviourSubject，我遇到了同样的问题。:( 我确定我在做一个概念错误。

有人知道如何在模板显示之前获取数据？

谢谢你的帮助

带有主题和行为主题的服务代码：

const INTI_DATA = [];

@Injectable({
  providedIn: 'root'
})
export class FormStorageService {
  dbSubject = new Subject<any[]>();
  dbBSubject = new BehaviorSubject(INTI_DATA);
  data$: Observable<any> = this.dbBSubject.asObservable();

  private _URL: any = '../assets/DB-Test/data.json';


  private dbData: any[] = [];

  constructor(private http: HttpClient) {}


  getDBDataBehavior() {
    this.http.get<any[]>(this._URL).subscribe((response: any[]) => {
      const value = response['DB_DATA'];
      this.dbBSubject.next(value);
    }, error => {
      console.log('Error : ', error);
      alert(error.message);
    });
  }

  getDBData() {
    this.http.get<any[]>(this._URL).subscribe((response: any[]) => {
      const value = response['DB_DATA'];
      this.dbSubject.next(value);
    }, error => {
      console.log('Error : ', error);
      alert(error.message);
    });
  }
}

带有主题调用的 Page.TS (Form2Page)

export class Form2Page implements OnInit, OnDestroy {
  obsSubscription: Subscription;
  public dbData: DataModel[] = [];

  itemsForm: FormGroup;

  constructor(private storageService: FormStorageService) {
    // Get data from DB
    this.storageService.getDBData();
    this.obsSubscription = this.storageService.dbSubject.subscribe(
      (value: any[]) => {
        this.dbData = value;
        console.log('Value in FORM2 : ', value);
        console.log('DB Data in FORM2 in subscribe : ', this.dbData);
      },
      error => {
        console.log('erreur', error);
      }
    );
    console.log('DB Data DB Data in FORM2 : ', this.dbData);
  }

  ngOnInit() {
    console.log('DB Data in FORM2 in ngOnInit : ', this.dbData);
  }

  ngOnDestroy() {
    this.obsSubscription.unsubscribe();
  }
}

结果在控制台。一段时间后，您可以看到 dbData 得到一些数据

DB Data DB Data in FORM2 :  []
form2.page.ts:46 DB Data in FORM2 in ngOnInit :  []
form2.page.ts:29 Value in FORM2 :  {ITEMS: Array(1)}
form2.page.ts:30 DB Data in FORM2 in subscribe :  {ITEMS: Array(1)}

Page.TS (Form3Page) 与 BehaviorSubject 调用

export class Form3Page implements OnInit {
  obsBSubject$ = this.formStorage.data$;
  public dbData: any[] = [];

  constructor(private formStorage: FormStorageService) { 
    this.formStorage.getDBDataBehavior();
    this.obsBSubject$.subscribe(
      (value: any[]) => {
        this.dbData = value;
        console.log('Value in FORM3 : ', value);
        console.log('DB Data in FORM3 in subscribe : ', this.dbData);
      },
      error => {
        console.log('erreur', error);
      }
    );
    console.log('DB Data in FORM3 : ', this.dbData);
  }


  ngOnInit() {
    console.log('DB Data in FORM3 in ngOnInit : ', this.dbData);
  }

}

结果在控制台。一段时间后，您可以看到 dbData 得到一些数据

Value in FORM3 :  []
form3.page.ts:19 DB Data in FORM3 in subscribe :  []
form3.page.ts:25 DB Data in FORM3 :  []
form3.page.ts:30 DB Data in FORM3 in ngOnInit :  []

form3.page.ts:18 Value in FORM3 :  {ITEMS: Array(1)}
form3.page.ts:19 DB Data in FORM3 in subscribe :  {ITEMS: Array(1)}

标签： angularionic-frameworkbehaviorsubjectsubject

解决方案

首先，您必须从在 ngOninit 中调用服务方法而不是在构造函数中获取数据查看此链接 [构造函数和 ngOnInit 之间的区别

那么在将所有数据显示到模板中之前，您必须使用 *ngIf 确保数据已经存在

如果您不关心性能，请使用 setTimeOut 函数解决解决方案，但我个人不喜欢这个解决方案...

推荐阅读