在 Angular 18 NGRX 信号中显示嵌套对象数据

Question

我目前正在使用 Angular 18，并且检索一个客户对象。在这个对象内部，还有另一个对象，称为financialSituation。我想显示该对象的数据，目前，我正在使用以下语法：

<div class="div">{{customer$$()?.financialSituation?.children}}</div>

有更好的方法吗？我应该避免使用问号吗？ 我该如何处理它为空或未定义的情况？在这种情况下写另一个值吗？

Answer 1

如果您使用 Angular 18，您可以使用新的控制流（您可以在 StackOverflow 上看到更多内容）

@if(customer$$ | async; as customer) {
  @if(customer.financialSituation; as financialSituation) {
    <div>{{ financialSituation.children }}</div>
  } @else {
  # handle financialSituation being empty
  }
} @else {
 # handle customer being empty
}

现在关于您剩下的问题：

当值未定义或为空时，您应该使用问号以避免错误。然而，当您使用新的控制流时，您可以避免其中的大部分
既然您写道您确实使用 NGRX，您还可以创建一个新的选择器，使用您用来获取客户的选择器，然后执行逻辑以检索那里的
2. financialSituation?.children

   ，否则返回最适合您的内容。

export const financialSitutationChildrenSelector = createSelector(
  customerSelector,
  (state: <DataTypeOfCustomerState>): <DataTypeOfYourChildren> =>
    state?.financialSitutation?.children ?? null
);

由于我根本看不到您的代码，因此很难给出更具体的示例。根据您想要显示数据的方式，您还可以以角度创建一个新组件，该组件接受子级的数据类型，然后以您认为合适的方式呈现所包含的数据。

此外，您可以使用新的

store$.select()

方法来接收信号而不是可观察量，而不是使用 RXJS 的 

store$.selectSignal()

方法。就我个人而言，我发现使用信号更容易，因为您不再需要 HTML 中的异步管道。