html - 在实现 ngrx Observable 时显示未知类型的对象

Question

这是我组件的 typescript 代码:

import { Component, Input, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';

@Component({
    selector: 'app-counter-output',
    templateUrl: './counter-output.component.html',
    styleUrls: ['./counter-output.component.css']
})
export class CounterOutputComponent implements OnInit {
    counter!: number;
    counter$!: any;

    constructor(private store: Store<{ counter: { counter: number } }>) {
    }

    ngOnInit(): void {

        this.store.select('counter').subscribe((data) => {
            this.counter = data.counter;
            console.log(data);
        });
        this.counter$ = this.store.select('counter');
        console.log(this.counter$);
    }
}

这是它的 HTML 模板:

<div>This is the counter:{{(counter$|async).counter}}</div>
<div>This is the counter:{{counter}}</div>

HTML 文件中的第 1 行有错误。

当我订阅 typescript 文件时，我能够获取该值，但是当我将它用作可观察值时，它显示错误。

Answer 1

将类型设置为 counter$ .

export interface Counter {
    counter: number;
}

...

counter$: Observable<Counter>;

当然，你必须确保选择器返回 Counter作为数据。

编辑:如果您坚持使用 any (这超出了使用 Typescript 的目的)，您可以使用 $any() type cast function抑制此错误。

<div>This is the counter:{{ ($any(counter$|async)).counter }}</div>