Angular 11 ngmodel 不绑定(bind)选择

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 片段:

            <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”来记录变量