嗨，我想從 observable 訪問介面內的屬性。
我在這個界面中有兩個屬性。貸款等級.ts
export interface LoanGrade{
grade:string
subgrade: string
}
我使用訂閱來訪問 Observable<LoanGrade[]>。編輯.component.ts
grades: LoanGrade[];
ngOnInit():void{
this.termGradeServie.termGradeData$.subscribe(grades=>{
this.grades = grades;
})
}
然后在我的 html 中，我想列印出我得到的 observable 中存在的所有成績。但我不能做 item.grade。我怎樣才能做到這一點？編輯.component.html
<ng-container *ngFor="let item of grades">
<tr>
<td><span>{{item.grade}}</span></td>
</tr>
</ng-container>
我認為問題在于，當我訂閱 termGradeData$ 時，它會回傳 observable(LoanGrade[])，所以我無法將自己設定this.grades為 LoanGrade[]。但是如果我將它設定為 LoanGrade[]，我將無法訪問等級或路基的屬性。
uj5u.com熱心網友回復：
在您的服務中，請確保使用以下LoanGrade[]型別撰寫可觀察物件：
export interface LoanGrade {
grade: string;
subgrade: string;
}
@Injectable({ providedIn: 'root' })
export class TermGradeService {
public termGradeData$: Observable<LoanGrade[]>;
}
并且在代碼的某處它會獲得一個值（例如，通過將它連接到一個http.get方法）。
如果你需要自己設定一個值，你可以使用 'BehaviorSubject' 如下：
export interface LoanGrade {
grade: string;
subgrade: string;
}
const initalLoanGradesValue: LoanGrade[] = [];
@Injectable({ providedIn: 'root' })
export class TermGradeService {
private _termGradeData$: BehaviorSubject<LoanGrade[]> = new BehaviorSubject<LoanGrade[]>(initalLoanGradesValue);
get termGradeData$() {
return this._termGradeData$.asObservable();
}
// ...
}
然后在代碼的某處，確保通過 BehaviorSubject 發出一個值：
this._termGradeData$.next([
{ grade: 'x1', subgrade: 'y1' },
{ grade: 'x2', subgrade: 'y2' },
{ grade: 'x3', subgrade: 'y3' },
]);
然后在您的組件中，您可以在下面執行 A 或 B：
一種
private termsGradeSub: Subscription;
public grades: LoanGrade[];
ngOnInit(): void {
this.termsGradeSub = this.termGradeService.termGradeData$.subscribe((grades) => {
this.grades = grades; // "pull" the grades out of the observable, and save it to a local variable
});
}
// ...
ngOnDestroy() {
this.termsGradeSub?.unsubscribe();
}
and in your html:
<ng-container *ngFor="let item of grades">
<tr>
<td><span>{{ item.grade }}</span></td>
</tr>
</ng-container>
or
B (preferred way of reading observables): inside the component:
public termGradeData$: Observable<LoanGrade[]>;
ngOnInit() {
this.termGradeData$ = this.termGradeService.termGradeData$;
}
and use the async pipe in your html:
<ng-container *ngFor="let item of grades | async">
<tr>
<td><span>{{ item.grade }}</span></td>
</tr>
</ng-container>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/444506.html