如何访问接口打字稿中的属性

Question

嗨，我想从 observable 访问界面内的属性。

我在这个界面中有两个属性。贷款-grade.ts

export interface LoanGrade{
    grade:string
    subgrade: string
}

我使用订阅来访问 Observable。 edit.component.ts

grades: LoanGrade[];
ngOnInit():void{
    this.termGradeServie.termGradeData$.subscribe(grades=>{
     this.grades = grades; 
  })
}

然后在我的 html 中，我想打印出我得到的可观察到的所有成绩。但是我做不到item.grade。我怎样才能做到这一点？ edit.component.html

<ng-container *ngFor="let item of grades">
   <tr>
       <td><span>{{item.grade}}</span></td> 
   </tr>
</ng-container>

我认为问题是当我订阅 termGradeData$ 时它 returns observable(LoanGrade[]) 所以我无法帮助自己将 this.grades 设置为 LoanGrade[]。但是，如果我将其设置为 LoanGrade[]，我将无法访问等级或路基的属性。

Answer 1

在您的服务中，确保使用 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：

A

    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();
    }

在你的 html:

<ng-container *ngFor="let item of grades">
   <tr>
       <td><span>{{ item.grade }}</span></td> 
   </tr>
</ng-container>

或

B（读取可观察量的首选方式）：组件内部：

public termGradeData$: Observable<LoanGrade[]>;

ngOnInit() {
    this.termGradeData$ = this.termGradeService.termGradeData$;
}

并在 html:

中使用 async 管道

<ng-container *ngFor="let item of grades | async">
   <tr>
       <td><span>{{ item.grade }}</span></td> 
   </tr>
</ng-container>

如何访问接口打字稿中的属性

How to access properties in interface typescript

interface

observable

typescript

angular