我有一个这样定义的信号:
export enum LoadingReason {
indexingFiles,
}
export interface LoadingState {
reason: LoadingReason;
percent?: number;
}
isLoading: Signal<false | LoadingState>;
在模板中,我尝试读取percent属性,这会产生静态错误,因为Typescript无法保证
isLoading()
的类型不是false
。
@if(isLoading() !== false && isLoading().percent === undefined){
<mat-spinner diameter="30"></mat-spinner>
}
通常,在控制器端,这可以通过定义一个保存信号内容的变量来解决。
示例(无法在模板中完成,但可以在控制器中完成):
const isLoading = this.isLoading();
if (isLoading !== false && isLoading.percent !== undefined) {
...
}
如何使用 Angular 的信号处理这种情况?
@let
声明本地模板变量,如下所示:
@let loading = isLoading();
@if (loading !== false && loading.percent === undefined) {
Spinner
}
从 Angular v18.x 开始,
处于开发者预览版,在升级到稳定版本之前可能会发生变化@let