Angular 9 Keyvalues 管道不是为生产而构建的答案

【问题标题】：Angular 9 Keyvalues pipe doesn't build for productionAngular 9 Keyvalues 管道不是为生产而构建的
【发布时间】：2020-07-30 12:27:22
【问题描述】：

我创建的应用程序在开发服务器 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 的某种打字错误，但由于我只是一个初学者，我不太确定我能做些什么来修复它。

我在 html 的第 22 行遗漏了第二个错误，因为它与我使用键值管道的第 9 行的错误相同

谢谢

【问题讨论】：

你的 unsorted() { } 方法在你的 ts 文件中是空白的
这是故意的。默认情况下，键值管道按我不想要的键排序，当数据来自 Firestore 时，数据已经按照我想要的方式排序。如果我以同样的错误忽略它，应用程序仍然无法构建。
你能改变你的变量 city:object;郊区：对象；到城市：任何；郊区：任何；
我试过了。在构建 Argument of type '() => void' is not assignable to parameter of type '(a: KeyValue<unknown, unknown>, b: KeyValue<unknown, unknown> 时呈现略有不同的错误
你想明白了吗？我在使用 Angular 10 时遇到了完全相同的问题

标签： html angular typescript angular-pipe

【解决方案1】：

使用$any() type casting也是一种摆脱错误的方法：

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

【讨论】：

【解决方案2】：

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

需要以下操作之一：

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

【讨论】：

您最好对有问题的特定地方使用 $(any)，而不是为整个应用禁用类型检查

【解决方案3】：

根据这个 issue 现已解决，看来升级 Angular 可能会解决您的问题。

【讨论】：

【解决方案4】：

我遇到了同样的问题，并尝试了各种管道和解决方法来构建。我最终在 tsconfig 文件中更改了以下内容，并且能够构建。

显然，这不是一个理想的长期解决方案。我会在最新版本出来时更新 angular，看看是否修复。

"fullTemplateTypeCheck": false,

【讨论】：

您最好对有问题的特定位置使用 $(any)，而不是为整个应用禁用类型检查。
我在整个组件中都试过了。那仍然没有产生任何有用的东西。我最终做的是将我的对象转换为数组...