ngFor將字串字面量型別轉換為字串，拋出“元素隱式具有'any'型別，因為不能使用'string'型別的運算式......”

使用迭代器*ngFor將字串聯合文字型別("apple" | "banana")轉換為字串型別。當我將它用作期望正確的字串聯合文字型別的陣列的索引時，我收到錯誤：

元素隱式具有“any”型別，因為“string”型別的運算式不能用于索引型別“FruitCollection”。

apple-banana-component.ts：

import { Component, OnInit } from '@angular/core';

const Fruits = ["apple", "banana"] as const;
type Fruit = typeof Fruits[number]; // "apple" | "banana"
type FruitCollection = { [fruit in Fruit]: number }; // {apple: number, banana: number}

@Component({
    selector: 'app-apple-banana',
    templateUrl: './apple-banana.component.html'
})
export class AppleBananaComponent implements OnInit {
    fruitBasket: FruitCollection = {
        apple: 10,
        banana: 10
    }
    fruitEaten: FruitCollection = {
        apple: 0,
        banana: 0
    }
    constructor() { }
    ngOnInit(): void { }
    eatFruit(fruit: Fruit) {
        this.fruitEaten[fruit]  ;
        this.fruitBasket[fruit]--;
    }
}

apple-banana-component.html：

<div>
You have eaten {{fruitEaten['apple']}} apples and {{fruitEaten['banana']}} bananas. <!-- works -->

<div *ngFor="let fruit of fruitBasket | keyvalue">
    {{fruit.key}}: 
    {{fruit.value}} in basket, 
    {{fruitEaten[fruit.key]}}  <!-- ERROR: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'FruitCollection'. -->    
    eaten.
    <button (click)="eatFruit($any(fruit.key))">eat {{fruit.key}}</button>
</div>
</div>

出于某種原因，我無法理解，$any(fruit.key)在里面作業，eatFruit()但不在里面fruitBasket[]。

{{fruitEaten[fruit.key as Fruit]}} <!-- ERROR: Parser Error: Missing expected ] at column 22 [...] -->

{{fruitEaten[fruit.key as keyof typeof fruitEaten]}} <!-- ERROR: Parser Error: Missing expected ] at column 22 [...] -->

{{fruitEaten[$any(fruit.key)]}} <!-- ERROR: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type 'FruitCollection'. -->

uj5u.com熱心網友回復：

問題是由key產生的keyvalue總是一個string. 您不能使用 astring來索引您的型別，但也不能在模板中使用型別斷言。這$any是一個好主意，但當設定為時，甚至any不允許索引沒有索引簽名的物件型別。noImplicitAnytrue

您可以在組件中創建一個函式來進行強制轉換。

apple-banana-component.ts

public isFruit(value: string): Fruit {
  return value as Fruit
}

您現在可以在模板中使用此功能。

<div *ngFor="let fruit of fruitBasket | keyvalue">
    {{fruit.key}}: 
    {{fruit.value}} in basket, 
    {{fruitEaten[isFruit(fruit.key)]}}
    eaten.
    <button (click)="eatFruit(isFruit(fruit.key))">eat {{fruit.key}}</button>
</div>

uj5u.com熱心網友回復：

自我回答，因為我剛剛找到了適合我的解決方案。Tobias S. 的解決方法有效，但它需要定義一個新函式。可以改為迭代常量 Fruits：

import { Component, OnInit } from '@angular/core';

const Fruits = ["apple", "banana"] as const;
type Fruit = typeof Fruits[number]; // "apple" | "banana"
type FruitCollection = { [fruit in Fruit]: number }; // {apple: number, banana: number}

@Component({
    selector: 'app-apple-banana',
    templateUrl: './apple-banana.component.html'
})
export class AppleBananaComponent implements OnInit {
    fruits = Fruits;
    fruitBasket: FruitCollection = {
        apple: 10,
        banana: 10
    }
    fruitEaten: FruitCollection = {
        apple: 0,
        banana: 0
    }
    constructor() { }
    ngOnInit(): void { }
    eatFruit(fruit: Fruit) {
        this.fruitEaten[fruit]  ;
        this.fruitBasket[fruit]--;
    }
}

我不明白為什么，但迭代fruits = Fruits = ["apple", "banana"]而不是過度fruitBasket[]保留字串文字聯合型別 inside *ngFor，防止任何型別錯誤。

<div *ngFor="let fruit of fruits">
    {{fruit}}: 
    {{fruitBasket[fruit]}} in basket,
    {{fruitEaten[fruit]}} eaten.
    eaten.
    <button (click)="eatFruit(fruit)">eat {{fruit}}</button>
</div>

所以我不確定為什么會這樣，但確實如此。

標籤：有角度的打字稿模板恩福字符串文字

上一篇：如何將mat-select的文本固定在組件的邊框上？

下一篇：移動到其他選項卡時以角度顯示警報訊息