Object Angular 5 Select multiple返回选定对象,而不是带有选定对象的数组

Object Angular 5 Select multiple返回选定对象,而不是带有选定对象的数组,object,select,angular5,angular2-formbuilder,Object,Select,Angular5,Angular2 Formbuilder,我有一个很烦人的问题。让我添加我的html: <div class="page"> <h1>Add user</h1> <form [formGroup]="inviteUserForm" (ngSubmit)="onSubmit()" novalidate> <div class="row"> <div class="form-group col-lg-6"> <lab

我有一个很烦人的问题。让我添加我的html:

<div class="page">
<h1>Add user</h1>
<form [formGroup]="inviteUserForm" (ngSubmit)="onSubmit()" novalidate>
    <div class="row">
        <div class="form-group col-lg-6">
            <label for="email">
                Email
            </label>
            <input class="form-control" id="email" formControlName="email">
        </div>
    </div>

    <div class="row">        
        <div class="form-group col-lg-6">
            <label for="roles">
                User role
            </label>
            <select class="form-control" id="roles" multiple formControlName="roles">
                <ng-container *ngFor="let role of roles">
                    <option *ngIf="role !== 5" value="{{role}}">{{role | userRole}}</option>
                </ng-container>
            </select>
        </div>
    </div>

    <div class="row">        
        <div class="form-group col-lg-6">
            <label for="account">
                Account
            </label>
            <select class="form-control" id="accounts" multiple formControlName="accounts">
                <ng-container *ngFor="let account of accounts">
                    <option [attr.selected]="activeAccount.id == account.id" 
                        value="account">{{account.name}}</option>
                </ng-container>
            </select>
        </div>
    </div>

    <button class="btn btn-primary" type="submit">Invite user</button>
</form>
目前我在accounts数组中只有一个帐户。
有没有关于如何解决这个问题的建议?我完全不知道为什么它从
表单.value
调用返回对象,而不是从包含对象的数组返回对象。

我将为我自己的问题添加一个答案。问题出在setValue调用中。我应该添加一个带有选定对象的数组,而不仅仅是选定对象。如果有人犯了同样的错误,我会把这个留在这里,仅供参考

import {Component} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {Router} from "@angular/router";
import {ErrorService} from '../../../../_services/error.service';
import {UserService} from '../../../../_services/user.service';
import {AccountService} from '../../../../_services/account.service';
import {Account} from '../../../../_models/account';
import {UserType} from '../../../../_enums/user-type.enum';

@Component({
    selector: 'user',
    templateUrl: './user.component.html',
    styleUrls: ['./user.component.css']
})

export class UserComponent {
    inviteUserForm: FormGroup;
    userType: UserType;
    accounts: Account[];
    activeAccount: Account;
    roles: number[];

    constructor(private errorService:ErrorService,
                private formBuilder: FormBuilder,
                private userService: UserService,
                private accountService: AccountService,
                private router: Router) {}

    ngOnInit() {
        this.inviteUserForm = this.formBuilder.group({
            email: ["", [Validators.required, Validators.email]],
            accounts: [[], [Validators.required]],
            roles: [[], [Validators.required]]
        });

        this.accountService.getAccounts().subscribe(
            (accounts) => {
                this.accounts = accounts;
                this.activeAccount = this.accountService.getActiveAccount(this.accounts);
                this.inviteUserForm.controls['accounts'].setValue(this.activeAccount);
            }
        );

        this.roles = this.getUserRoles();
    }

    onSubmit() {
        if (this.inviteUserForm.valid){
            this.userService.invite(this.inviteUserForm.value).subscribe(
                () => this.router.navigate(['/settings/users']),
                (error) => this.errorService.setError(error)
            );
        }
    }

    getUserRoles(): Array<number> {
        var keys = Object.keys(UserType);
        return keys.slice(0, keys.length / 2).map(item => parseInt(item));
    }
}
{
    "email":"test@test.com",
    "accounts":{
        "id":1,
        "name":"Test business",
        "addressLine1":"A road",
        "addressLine2":"Centrum",
        "postalCode":"12345Z",
        "postalCity":"London",
        "country":"Great Britain",
        "type":"business",
        "vatNumber":"123456123456"
    },
    "roles":["3"]
}