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的某种键入错误，但是由于我不只是一个初学者，因此我不确定该如何解决。

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

谢谢

Answer 1

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

需要以下操作之一：

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

Answer 2

根据目前已解决的issue，似乎像升级角度可以解决您的问题。

Answer 3

我遇到了同样的问题，并尝试了各种管道和变通办法来构建。我最终在tsconfig文件中更改了以下内容，然后就可以构建了。

显然，这不是理想的长期解决方案。最新版本发布时，我将更新角度，看看是否固定。

"fullTemplateTypeCheck": false,

Answer 4

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

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

Angular 9 Keyvalues管道无法用于生产

4 个答案: