Angular 角度：选择在两个对象具有相同值时显示错误的默认值

目标：如果个人是男性表亲，则下拉默认值为Primo；如果他们是女性表亲，则下拉默认值为Prima

问题：如果我只有男性表亲的条件，它会显示Primo，但一旦我将Prima添加到数组中，它就会默认为该条件

背景： 因为西班牙语中的某些单词有多种性别，而英语中只有一个单词： 它们都具有相同的值，但视图值不同：

关系=[

{value:cosson，viewValue:Primo}

{value:consence，viewValue:Prima} ]

此个人关系的数据库值='Counse'

我所尝试的：

<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
  <mat-form-field>
    <mat-select placeholder="Relationship" formControlName="relationship" required>
         <mat-option *ngFor="let rel of relations" [value]="rel.value" (click)="selectRelationship(rel.value)">
            {{ rel.viewValue }}
        </mat-option>
    </mat-select>
  </mat-form-field>
</form>

let relationship = this.individual.Relationship; //comes from Database. Value is 'Cousin'

this.relations = [          
            { value: 'Cousin', viewValue: 'Cousin' },
            { value: 'Daughter', viewValue: 'Daughter },            
            { value: 'Other (Write in Box Below)', viewValue: 'Other (Write in Box Below)' }
        ];

this.form = this.fb.group({
            'firstName': [this.individual.FirstName],
            'lastName': [this.individual.LastName],
            'relationship': [relationship],
            'other': [this.individual.OtherRelationship]
        });

this.indexCousin = this.relations.map((o) => o.value).indexOf("Cousin");

if (this.individual.Relationship.startsWith('Cousin')) {
    if (this.individual.Gender == 'M') {
        this.relations[indexCousin].viewValue = "Primo";
        this.relations.push({ value: 'Cousin', viewValue: "Prima" });
    }
}

• 我注意到，如果数组中的两个项具有相同的值，它将选择数组中第一个项。由于我按字母顺序对它们进行了排序，因此无论发生什么情况，它都会显示Prima。
  • 将其从mat select更改为mat option或反之亦然都没有帮助
  • 我回去查看了有关数据绑定和响应的信息 形式
  • 我尝试更改项目添加到数组的顺序
  • 唯一有效的方法就是把Primo放在Prima之前，尽管不是按字母顺序排列的

是否可以执行我想要的操作，但仍然有两个值相同的对象

下面是我的代码的一个简单示例：

HTML：

<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
  <mat-form-field>
    <mat-select placeholder="Relationship" formControlName="relationship" required>
         <mat-option *ngFor="let rel of relations" [value]="rel.value" (click)="selectRelationship(rel.value)">
            {{ rel.viewValue }}
        </mat-option>
    </mat-select>
  </mat-form-field>
</form>

let relationship = this.individual.Relationship; //comes from Database. Value is 'Cousin'

this.relations = [          
            { value: 'Cousin', viewValue: 'Cousin' },
            { value: 'Daughter', viewValue: 'Daughter },            
            { value: 'Other (Write in Box Below)', viewValue: 'Other (Write in Box Below)' }
        ];

this.form = this.fb.group({
            'firstName': [this.individual.FirstName],
            'lastName': [this.individual.LastName],
            'relationship': [relationship],
            'other': [this.individual.OtherRelationship]
        });

this.indexCousin = this.relations.map((o) => o.value).indexOf("Cousin");

if (this.individual.Relationship.startsWith('Cousin')) {
    if (this.individual.Gender == 'M') {
        this.relations[indexCousin].viewValue = "Primo";
        this.relations.push({ value: 'Cousin', viewValue: "Prima" });
    }
}

---

而不是将值设置为string或int。。无论值属性如何，都可以使用使值唯一的整个对象。如果您需要更多详细信息，请告诉我

HTML

---

你好，穆罕默德，谢谢你，我喜欢这个主意。我将其设置为与对象相等。我的问题是，直到我将mat选项设置为[value]=“rel”而不是[value]时，它才起作用=“相对价值。我不理解这一点，因为我认为是mat select上的值对默认值起作用，而不是mat选项。另外，在我进行此更改后，数据库值不再更新。它不能与

rel.value

一起工作的原因是

rel.value

重复。。所以Angular选择selected作为列表中首先定义的一个（而不是按字母顺序）。。但是

rel

是唯一的，因为虽然它重复了

value

，但是不同的

viewValue

。。对于数据库位。。尝试console.log有效负载并确保将

rel.value

而不是

rel

传递到服务器。如果通过

rel

，数据库调用将失败。在上传到服务器之前，您可能需要进行一些有效负载格式化。对不起，我被最后一句话弄糊涂了。在HTML中显示to do value=rel。但在上一条评论中，您说要对服务器执行rel.value。是的，查看调试器，它尝试发送带有value和viewValue的整个对象。这个解决方案似乎解决了一个问题，但却产生了另一个问题？