Angular 9 Keyvalues 管道在生产环境下无法构建

Question

我创建的应用程序在开发服务器上（ng serve）运行良好，但是当我尝试构建生产版本时，它会出现以下错误

我的应用程序在开发服务器上运行正常，但是当我试图构建生产版本时，出现了这个错误。

ERROR in src/app/leaderboard/leaderboard.component.html(9,17): Argument of type 'object' is not assignable to parameter of type 'Map<unknown, unknown>'

这是我的 leaderboard.component.ts 文件

import { Component, OnInit } from '@angular/core';
import * as firebase from 'firebase/app';
import 'firebase/firestore';


@Component({
  selector: 'app-leaderboard',
  templateUrl: './leaderboard.component.html',
  styleUrls: ['./leaderboard.component.css']
})

export class LeaderboardComponent implements OnInit {

  constructor() { }
  db = firebase.firestore();
  cities:object;
  suburbs:object;
  unsorted() { }
  async getCities() {
    await this.db.collection("Cities").orderBy('count', "desc").get()
    .then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            //console.log(doc.id, ": ", doc.data().count);
            this.cities[doc.id] = doc.data().count
        });
    })
    .catch(function(error) {
        console.log("Error getting documents: ", error);
    });
  }

  async getSuburbs() {
    await this.db.collection("Suburbs").orderBy('count', "desc").get()
    .then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            //console.log(doc.id, ": ", doc.data().count);
            this.suburbs[doc.id] = doc.data().count
        });
    })
    .catch(function(error) {
        console.log("Error getting documents: ", error);
    });
  }



  ngOnInit() {
    this.getCities()
    this.getSuburbs()
  }

}

这是leaderboard.component.html文件

<div class="container">
    <div class="row">
        <h3>Cities</h3>
        <table class="table">
            <thead class="thead-dark">
                <th scope="col">City</th>
                <th scope="col">Bears found</th>
            </thead>
            <tr *ngFor="let city of cities | keyvalue: unsorted">
                <td>{{city.key}}</td>
                <td>{{city.value}}</td>
            </tr>
        </table>
    </div>
    <div class="row">
        <h3>Suburbs</h3>
        <table class="table">
            <thead class="thead-dark">
                <th scope="col">Suburb</th>
                <th scope="col">Bears found</th>
            </thead>
            <tr *ngFor="let suburb of suburbs | keyvalue: unsorted">
                <td>{{suburb.key}}</td>
                <td>{{suburb.value}}</td>
            </tr>
        </table>
    </div>
</div>

我认为这是TypeScript的某种打字错误，但由于我只是一个初学者，不太确定我能做什么来修复它。

我已经忽略了第二个错误，因为它与我在第9行使用keyvalue管道时出现的错误相同。

谢谢

- Hamish McBrearty

---

你的ts文件中的unsorted() { }方法是空的。 - Kiran Mistry

那是故意的。keyvalue管道默认按键排序，而我不想要这个，默认情况下，当数据来自Firestore时，它已经按我想要的方式排序。如果我省略它，应用程序仍然无法构建并出现相同的错误。 - Hamish McBrearty

你能把变量cities:object;和suburbs:object;改成cities:any;和suburbs:any;吗？ - mr. pc_coder

我已经尝试过了。在构建时会生成略有不同的错误。“类型为'() => void'的参数无法分配给类型为'(a: KeyValue<unknown, unknown>, b: KeyValue<unknown, unknown>) => number | 0 | -1'的参数。” - Hamish McBrearty

你解决了这个问题吗？我使用 Angular 10 也遇到了完全相同的问题。 - Willie

我也很感兴趣，你解决了吗？ - pasevin

Answer 1

使用$any()类型转换也是消除错误的一种方式：

<tr *ngFor="let city of $any(cities) | keyvalue: unsorted">

- Jonathan

Answer 2

启用“strictTemplates”标志意味着“fullTemplateTypeCheck”也被启用，因此后者不能显式禁用。

需要执行以下操作之一：

1. 删除“fullTemplateTypeCheck”选项。
2. 删除“strictTemplates”或将其设置为“false”。

- Roshan Khandelwal

---

你最好在特定的有问题的地方使用$(任何)而不是禁用整个应用程序的类型检查。 - rooby

Answer 3

根据已解决的问题，似乎升级Angular可能会解决您的问题。

- yuval.bl

Answer 4

我曾经遇到同样的问题，尝试了各种管道和解决方法才能进行构建。最终我在我的tsconfig文件中做出了以下更改，然后就能够进行构建了。

显然，这不是一个理想的长期解决方案。当最新版本发布时，我会更新Angular并查看是否已经修复了这个问题。

"fullTemplateTypeCheck": false,

- Willie

---

你最好在特定的有问题的地方使用$(任何)而不是禁用整个应用程序的类型检查。 - rooby

我尝试在整个组件中使用它，但仍然没有产生任何有用的结果。最终我做的是将我的对象转换成数组... - Willie