Angular 如何显示商店的内容？

我创建了以下存储：

imports: [BrowserModule, StoreModule.forRoot({ bugs: bugsReducer })],

然后我创建了减速器和动作：

const addBugAction = createAction('[bbb] add bug', props<Bug>());

export const bugsReducer = createReducer(
  { bugs: [] },
  on(addBugAction, (state, bug) => ({
    bugs: [...state.bugs, bug]
  }))
);

最后，我尝试将存储的内容显示到HTML模板中：

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="bugs$ | async">
      bugs: {{ (bugs$ | async).bugs }}
    </div>
  `
})
export class AppComponent {
  constructor(private store: Store<any>) {
    this.store.dispatch(
      addBugAction({
        x: 100,
        y: 200
      })
    );

    setTimeout(() => {
      const bugs$ = this.store.pipe(select('selectBugs'));
      bugs$.subscribe(console.log);
    }, 1000);
  }
}

@组件({
选择器：'应用程序根'，
模板：`
错误：{{（错误$|异步）.bugs}
`
})
导出类AppComponent{
构造函数（private store:store
您只需要从选择器中删除引号，就可以看到如下控制台日志：

const bugs$ = this.store.pipe(select(selectBugs));

要查看页面上的值，请创建一个TypeScript类变量来存储该值并将其绑定到模板中

我已经更新了你的代码

const bugs$ = this.store.pipe(select(selectBugs));