无法获取输入单选列表

Question

我有此映射用户* ------------------------- 1专业

export class User
{
    id: number;
    name: string;
    profession: Profession;
}

export class Profession
{
    id: number;
    libelle: string;
    selected: boolean;
}

我想创建一个用户，下面是必需的文件：

create-user.component.html 是：

<div *ngFor='let item of array;let i = index'>    
        <label>                
            <input type="radio" [checked]="item.selected" (change)='radioChecked(item.id, i, item)'>
            <span></span>
            <span class="check"></span>
            <span class="box"></span>
            {{item.libelle}}
        </label>
    </div> 

create-user.component.ts 是：

array: Profession[] =
    [
        {id: 1, libelle: "Engineer", selected: true},
        {id: 2, libelle: "Student", selected: false},
    ];

    radioChecked(id, i, pro)
    {
        this.array.forEach(pro=>
        {
            if(pro.id !== id)
            {
                pro.selected = false;
            }
            else
            {
                pro.selected = true;
            } 
        })

        this.userService.getProfessionById(id).subscribe(data =>
        {
            console.log(data);
            pro = data as Profession;

            localStorage.removeItem("ProfessionLibelle");
            localStorage.setItem("ProfessionLibelle", pro.libelle);

        },error => console.log(error));

        this.selectedProfessionRadio = localStorage.getItem("ProfessionLibelle");
        console.log("------- Profession: " + this.selectedProfessionRadio + " -- " + i + " -- " + id);    
    }

user.service.ts 是：

getProfessionById(id: number): Observable<Object>
    {
        return this.http.get<Profession>(`${this.baseUrl}/users/professions/id/${id}`);
    }

一旦访问界面create-user，就无法按照的描述加载职业诽谤列表。 如您所见：

• 列表第一次为空（案例1）。
• 但是在单击一个输入广播之后，列表将按预期加载（情况2）。

您能告诉我我错过了什么吗？ 非常感谢您的帮助。