如何配置Angular忽略模板错误并在生产环境中跳过出错的ngFor列表项

当然可以实现这个需求！直接让Angular跳过出错的条目其实不需要修改生产模式配置，毕竟Angular本身没有内置的“跳过错误条目”全局开关，但我们有几种实用的方案来解决这个问题，避免列表因为单个条目报错而中断：

方案1：提前在组件中过滤无效数据（最稳妥） #

从根源上把不符合结构的条目排除在循环数组之外，这是生产环境下最推荐的方式，因为它能避免模板层面的潜在错误，也让逻辑更清晰。

在组件类里处理你的foos数组：

// 假设你在组件里有foos数组
validFoos: any[];

ngOnInit() {
  // 过滤出属性链完整的条目
  this.validFoos = this.foos.filter(foo => {
    return foo && foo.this && foo.this.attribute && foo.this.attribute.doesnt && foo.this.attribute.doesnt.exist;
  });
}

然后模板里直接循环过滤后的数组：

<div *ngFor="let foo of validFoos">
  <p>{{foo.this.attribute.doesnt.exist}}</p>
</div>

方案2：在模板中结合安全导航符和*ngIf跳过条目 #

如果不想在组件里处理数据，也可以在模板里直接判断属性链是否完整，只渲染有效的条目。注意Angular不允许一个元素同时使用*ngFor和*ngIf，所以需要用<ng-container>作为容器：

<ng-container *ngFor="let foo of foos">
  <!-- 用安全导航符（?.）检查每一层属性，只有当整个链都存在时才渲染 -->
  <div *ngIf="foo?.this?.attribute?.doesnt?.exist">
    <p>{{foo.this.attribute.doesnt.exist}}</p>
  </div>
</ng-container>

安全导航符?.会在属性不存在时返回undefined，不会抛出异常，配合*ngIf就可以直接跳过那些属性链不完整的条目。

方案3：自定义管道过滤无效条目 #

如果多个地方都需要处理这类过滤，可以封装一个自定义管道，让模板更简洁：

首先创建管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'filterValidFoos' })
export class FilterValidFoosPipe implements PipeTransform {
  transform(foos: any[]): any[] {
    // 先判断是否是数组，避免空值报错
    if (!Array.isArray(foos)) return [];
    // 过滤逻辑和组件里一致
    return foos.filter(foo => 
      foo && foo.this && foo.this.attribute && foo.this.attribute.doesnt && foo.this.attribute.doesnt.exist
    );
  }
}

记得在模块里声明这个管道，然后模板里直接使用：

<div *ngFor="let foo of foos | filterValidFoos">
  <p>{{foo.this.attribute.doesnt.exist}}</p>
</div>

为什么不修改生产模式配置？ #

Angular的生产模式主要是关闭开发环境的断言、启用AOT编译、移除调试信息等，并没有提供“跳过模板渲染错误”的配置项。这类错误本质是数据结构和模板预期不一致导致的，从数据或模板层面处理才是更可靠的方式，避免隐藏其他潜在问题。

内容的提问来源于stack exchange，提问作者HelloWorld