ng serve/build --prod Angular 7 app时数组过滤器不起作用答案

【问题标题】：Array filter not working when ng serve/build --prod Angular 7 appng serve/build --prod Angular 7 app时数组过滤器不起作用
【发布时间】：2019-09-13 06:08:24
【问题描述】：

Angular CLI 7 应用程序有一个非常奇怪的问题，在运行“ng serve”时一切正常。但是在运行“ng serve --prod”时。在提供或构建应用程序时，我没有收到任何错误。确切的问题在于 array.filter(x => x.id === myVariable)

我尝试使用 --aot=false、--build-optimizer=false 运行应用程序，但似乎没有任何帮助，并且每当添加 prod 标志以服务或构建 array.filter 时，它都不起作用。

这里是环境细节：

Angular CLI: 7.0.4
Node: 8.10.0
OS: linux x64
Angular: 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.10.4
@angular-devkit/core         7.0.4
@angular-devkit/schematics   7.0.4
@schematics/angular          7.0.4
@schematics/update           0.10.4
rxjs                         6.3.3
typescript                   3.1.3

angular.json:

"configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": false,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "5mb"
            }
          ]
        },

这是我的恶魔密码：

searchUser(id: number) {
 const user = this.usersList.filter(x => x.id === id);
 console.log(user);
 return user;
}

userList 是 Json 对象的数组，例如：

[
{id: 1, name: "John"},
{id: 2, name: "Mary"},
etc...
]

当使用“ng serve”运行应用时，searchUser 返回正确的用户对象并将用户对象打印到控制台。

当使用“ng serve --prod”运行应用程序时，不会返回任何内容，控制台日志只显示未定义。

由于没有明显的错误（在服务或构建期间）我没有想法，为什么它不工作或者我应该更新一些包等。我可以重写那部分而不使用 lambda 表达式，如果这是问题，但我相信这应该可行。

谢谢！

【问题讨论】：

userList 是如何被填充的？是否有异步调用从后端获取用户列表？到目前为止，您发布的代码中没有任何明显的内容。只是为了测试，看看它是否都适用于 userList 的 const 而不是后端调用。
是的，我从后端进行 API 调用，但我也可以在成功过滤之前通过运行 --prod 来获得 console.log 完整列表。对我来说最神秘的是为什么我在运行或构建时没有收到任何错误
没有案例filter 可以返回未定义。您确定您正在观察正确的日志吗？我建议使用console.log({user}); 代替console.log(user)，这样输出会更有意义
否则，如果您的配置不支持自动字符串化，请使用console.log('user', user)

标签： angular typescript production

【解决方案1】：

有两种可能：

1) 在.filter函数之前，请检查usersList是否有数据。（可能是它的服务调用并且没有正确处理）。 2）请将userList定义为数组类型：

usersList: Array<object>;

【讨论】：

【解决方案2】：

这可能是因为在访问变量时，this.usersList 为空、未定义或不是数组的值。您可以先将值转换为数组，并确保过滤器功能在您需要时可用。

<Array>(this.usersList).filter(....)

或

<Array<object>>(this.usersList).filter(....)

另外，您可以先检查this.usersList 的值

let user;
if(Array.isArray(this.usersList)){
   user = this.usersList.filter(....)
}

【讨论】：

【解决方案3】：

哦，伙计，我犯了一个愚蠢的错误。

searchUser(id: number) {
const user = this.usersList.filter(x => x.id === id);

那是旧代码，原因略有不同，不起作用的是：

searchUser(user) {
...

其中 user 是一个对象，而我打印到控制台的 user.id 确实显示为某个数字，但实际类型是字符串。所以改为：

const user = this.usersList.filter(x => x.id === +id);

成功了。我现在可能会永远记住的东西，检查变量类型！仍然感谢您的思考。

【讨论】：