Question

在我的 Angular-11 中，我在 component.ts 中有这个代码：

export class ToastComponent implements OnInit, OnDestroy {
  showToast$: Observable<boolean>;
  toastHeader$: Observable<string>;
  toastBody$: Observable<string>;
  toastTime$: Observable<string>;

但是我收到了这个错误：

<块引用>

src/app/core/toast/toast.component.ts:15:3 - 错误 TS2564：属性“showToast$”没有初始值设定项，并且未在构造函数中明确分配。

<块引用>

15 showToast$：可观察的； ~~~~~~~~~~

如何解决？

谢谢

Answer 1

假设您最终要初始化这些属性（在 ngOnInit 或其他地方），您需要为每个声明添加一个 Definite Assignment Assertion(!)：

export class ToastComponent implements OnInit, OnDestroy {
  showToast$!: Observable<boolean>;
  toastHeader$!: Observable<string>;
  toastBody$!: Observable<string>;
  toastTime$!: Observable<string>;
  ...
}

Answer 2

正如错误解释的那样，属性被设置为分别具有 Observable<boolean 和 Observable<string> 类型。不幸的是，您从未为它们分配任何值，因此这些属性实际上是 undefined。

再次解决这个问题，阅读错误给了我们答案：在你声明这些属性时或在你的构造函数中直接为其赋值。

export class ToastComponent implements OnInit, OnDestroy {
  showToast$: Observable<boolean>;
  toastHeader$: Observable<string>;
  toastBody$: Observable<string>;
  toastTime$: Observable<string>;
  
  constructor() {
    this.showToast$ = of(false);
    this.toastHeader$ = of('foobar');
    this.toastBody$ = of('foobar');
    this.toastTime$ = of('foobar');
  }
}

或

export class ToastComponent implements OnInit, OnDestroy {
  showToast$ = of(false);
  toastHeader$ = of('foobar');
  toastBody$ = of('foobar');
  toastTime$ = of('foobar');
  
  constructor() {
  }
}

当然，您可以随意访问所有注入的服务/值（在任一解决方案中）。这些示例显然只是存根，并未真正包含您可能想要实现的任何逻辑。

Angular - 错误 TS2564：属性“showToast$”没有初始值设定项

2 个答案: