我有一个带有react 式表单数组项的模板:

<li class="nav-main-item" formArrayName="closedStatuses" *ngFor="let item of statusesForm.get('closedStatuses')['controls']; let i = index">
    <a formGroupName="{{i}}" class="nav-main-link" href="javascript:void(0)">
      <span class="nav-main-link-name">
        <div class="form-check">
          <input class="form-check-input"
                type="checkbox"
                [attr.id]="'closed-' + i"
                [attr.name]="'closed-' + i"
                formControlName="checked"
                (change)="onSelectStatus()">
          <label class="form-check-label" [attr.for]="'closed-' + i">{{ item.controls.name.value }}</label>
        </div>
      </span>
    </a>
</li>

错误:error TS2531: Object is possibly 'null'. statusesForm.get('closedStatuses')['controls']

如何修复此错误?

推荐答案

也许您可以使用帮助器函数来获取数组?

getStatusControls() {
  const closedStatuses = this.statusesForm.get('closedStatuses');
  return closedStatuses ? closedStatuses['controls'] : [];
}

RETURN语句中的三进制运算符应该确保您永远不会try 访问null中的'controls'.

<li class="nav-main-item" formArrayName="closedStatuses" *ngFor="let item of getStatusControls(); let i = index">

Angular相关问答推荐

iOS Mobile Safari - HTML5视频覆盖一切

NG构建后多余的国旗

将输入传递到组合Angular指令

Angular router-outlet 未渲染

为什么动画只触发一次?

如何修复不允许的HttpErrorResponse 405?

升级到 Webpack 5.79.0 后 NX Angular 项目构建失败

无法在 Angular 中使用 CryptoJS 正确加密

Angular JWT Token 被添加到lazyUpdate 而不是 HttpHeaders 中的标头

Angular 2 中的 ChangeDetectionStrategy.OnPush 和 Observable.subscribe

单选按钮的Angular2 Reactive Forms formControl

可从 Angular2 中的

Angular 2 中的 $implicit 是什么?

*ngIf 带有多个异步管道变量

在Angular 6 中找不到 HammerJS

Angular Material2 主题 - 如何设置应用程序背景?

Angular2中是否有像window.onbeforeunload这样的生命周期钩子?

Lint 错误:实现生命周期挂钩接口

测试一个包含 setTimeout() 的函数

如何使用 @ngrx/store 获取 State 对象的当前值?