angular 11 ngmodel 未绑定到选择

Question

在我的 Angular 11/TypeScript 项目中，我有以下模型：

export interface Opponent {
    id: number;
    name: string;
    beltRank: BeltRankEnum;
    heightInInches: number;
    weightInLbs: number;    
}

export enum BeltRankEnum {
    White = 1,
    Blue = 2,
    Purple = 3,
    Brown = 4,
    Black = 5
}

const WHITE = "WHITE"
const BLUE = "BLUE"
const PURPLE = "PURPLE"
const BROWN = "BROWN"
const BLACK = "BLACK"

export const BeltRankToLabelMapping : Record<BeltRankEnum, string>  = {
    [BeltRankEnum.White]: WHITE,
    [BeltRankEnum.Blue]: BLUE,
    [BeltRankEnum.Purple]: PURPLE,
    [BeltRankEnum.Brown]: BROWN,
    [BeltRankEnum.Black]: BLACK,
}

export const LabelToBeltRankMapping = {
    WHITE: BeltRankEnum.White,
    BLUE: BeltRankEnum.Blue,
    PURPLE: BeltRankEnum.Purple,
    BROWN: BeltRankEnum.Brown,
    BLACK: BeltRankEnum.Black,
}

我的组件是：

    public opponent: Opponent = null;
    beltRankToLabelMapping = BeltRankToLabelMapping;
    labelToBeltRankMapping = LabelToBeltRankMapping;
    beltRanks = Object.values(BeltRankEnum).filter(f => !isNaN(Number(f)))

html sn-p:

            <div class="form-group">
                <label class="beltRankLabel" for="beltRank">Belt Rank</label>
                <select [(ngModel)]="labelToBeltRankMapping[opponent.beltRank]">
                    <option *ngFor="let beltRank of beltRanks" 
                            [ngValue]="beltRank"> {{beltRankToLabelMapping[beltRank]}} </option>
                </select>
            </div>

我遇到的问题是下拉菜单没有显示对手的腰带等级值。它显示为空白。此外，当我从下拉列表中选择一个选项时，它并没有在对手模型上设置它。有谁知道出了什么问题？谢谢！

Answer 1

我认为这可能是您的 ngValue，需要更改为：

            <div class="form-group">
                <label class="beltRankLabel" for="beltRank">Belt Rank</label>
                <select [(ngModel)]="labelToBeltRankMapping[opponent.beltRank]">
                    <option *ngFor="let beltRank of beltRanks" 
                            [value]="beltRank"> {{beltRankToLabelMapping[beltRank]}} </option>
                </select>
            </div>

编辑：

您的代码中的真正问题是选择需要一个名称才能在 ngModel 中接收数据。看这个：

      <div class="form-group">
        <label class="beltRankLabel" for="beltRank">Belt Rank</label>
        <select [(ngModel)]="opponent.beltRank" name="beltRank">
                    <option *ngFor="let beltRank of beltRanks" 
                            [value]="beltRank"> {{beltRankToLabelMapping[beltRank]}} </option>
                </select>
      </div>

我在ngModel中做了一个小改动，通过“opponent.beltRank”来记录变量