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

Question

您好，我想从可观察的接口内访问属性。

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

export interface LoanGrade{
    grade:string
    subgrade: string
}

我使用 subscribe 来访问 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$ 时，它返回 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>