时间戳

首页 > 解决方案 > 获取选择一个菜单的默认值

angular - 获取选择一个菜单的默认值

问题描述

我有两个类的映射是：

用户 *--------------------1 性别

我在list-users.component.html上有用户列表。选择一个用户进行修改后，我将被重定向到modify-user.component.html

下面是所需的文件： * list-users.component.html是：

<table class="table">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Sexe</th>
        </tr>
    </thead>
    <tbody *ngIf="!loader">
        <tr *ngFor="let user of userbs | async" style="width: 1500px;">
            <td>{{user.id}}</td>
            <td>{{user.name}}</td>
            <td>{{user.sexe.libelle}}</td>
        </tr>
    </tbody>
</table>

whereuserbs是通过使用userService.getUsersList()类型为 的服务获得的Observable<User[]>。

modify-user.component.html是：

<form [formGroup]="editForm" (ngSubmit)="onSubmit()">

    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" formControlName="name" placeholder="Name" name="name" class="form-control" id="name">
    </div>

    <div class="form-group">
        <label for="name">Sexe</label>

        <select (change)="onChangeSexeName($event)" class="form-control select2" style="width: 100%;">
            <option *ngFor="let sexe of sexes" [ngValue]="sexe" [selected]="selected">{{sexe.name}}</option>
        </select>
        ==> Original Sexe: {{selectedSexeUserCompare.name}}
    </div>

    <button class="btn btn-success">Update</button>
</form>

和modify-user.component.ts是：

export class ModifyUserComponent implements OnInit {
    editForm: FormGroup;
    submitted = false;
    private selectedSexe;
    users: Observable<User[]>;
    libelleSexe: string;
    usrId: String;
    selectedSexeUserCompare = { num: localStorage.getItem("selectedSexeId"), name: localStorage.getItem("selectedSexeName") }
    sexeName: String;

    sexes: Array<Object> = [
        { num: 1, name: "Female" },
        { num: 2, name: "Male" }
    ];

    compareFn(a, b) {
        console.log(a, b, a && b && a.num == b.num);
        return a && b && a.num == b.num;
    }

    constructor(private formBuilder: FormBuilder, private router: Router, private userService: UserService) { }

    ngOnInit() {
        this.sexeName = localStorage.getItem("sexeLibelle");

        let userId = localStorage.getItem("editUserId");
        this.usrId = localStorage.getItem("editUserId");
        if (!userId) {
            alert("Invalid action.")
            this.router.navigate(['users-list']);
            return;
        }

        this.userService.getUserEntityId(+userId).map(se => se.sexe.libelle).subscribe((response) => {
            this.libelleSexe = response;
            localStorage.setItem("sexeLibelle", this.libelleSexe);
        });

        this.editForm = this.formBuilder.group({
            id: [],
            name: ['', Validators.required],
            username: ['', Validators.required],
            email: ['', Validators.required],
            password: ['', Validators.required],
            age: ['', Validators.required],
            active: ['false']
        });

        this.userService.getUserId(+userId).subscribe(data => {
            this.userService.getUserEntityId(+userId).map(se => se.sexe.libelle).subscribe((response) => {
                this.libelleSexe = response;
                let sexe = this.userService.getSexeByLibelle(this.libelleSexe);
                localStorage.setItem("sexeLibelle", this.libelleSexe);
                this.editForm.patchValue(data);
            });
        });
    }

    onChangeSexeName($event) {
        this.selectedSexe = $event.target.options[$event.target.options.selectedIndex].text;
    }

    onSubmit() {
        this.userService.updateUsera(this.editForm.value, this.selectedSexe).subscribe(data => {
            this.router.navigate(['users-list']);
        },
            error => {
                alert(error);
            });
    }
}

在修改用户页面上，我通常会得到性别列表（女性、男性）的第一个 sexe libelle ，而不是正确的 sexe libelle，就像显示的屏幕截图一样。

你能帮我解决这个问题吗？非常感谢。

标签： angulartypescriptangular6

解决方案

我不确定你为什么不添加sex到你的editForm. 添加sex到您的editForm并使用存储在您的localStorage.

this.editForm = this.formBuilder.group({
    sex: [selectedSexeUserCompare.num, Validators.required]
    // Add form controls here
});

我在您的 HTML 中注意到的另一个问题是您将ngValuein设置options为整个sexe对象。您应该将其设置为唯一值，例如对象num中的属性sexe。

修改-user.component.html

<select formControlName="sex" (change)="onChangeSexeName($event)" class="form-control select2" style="width: 100%;">
    <option *ngFor="let sexe of sexes" [ngValue]="sexe.num">
        {{sexe.name}}
    </option>
</select>

编辑：这是StackBlitz上的一个工作示例

推荐阅读