如何访问接口类型记录中的属性

Question

嗨，我想从可观察的界面上访问这个属性。

我在这个接口中有两个属性。loan-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$时，它会返回可观察的( 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>