如何只获取index [0]的值来显示JSON对象中的数组？

Question

我在下面列出的user.ts文件中有一个JSON对象'us​​er'：

ngOnInit() {

    // initialize user model here
    this.user = {
        cardholder: '',
        place: '',
        site:'',
        building: '',
        group: '',
        justification: ''
    }
}  

在我的page.component.html中，用户填写表单，一个组件是下拉菜单。下拉菜单被分配给JSON对象，我可以看到它是使用{{user | json}}概念。

<div>
    <label>Select A Site</label>
    <select name="site" [(ngModel)]="user.site">
        <option *ngFor="let site of sites" [ngValue]="site">  
            {{site.display}}
        </option>
    </select>
</div>

我在旁边显示一个摘要面板，向用户显示他们在表单中选择的内容，当我执行{{user.site}}时，我看到对象，对象显示。

<p><span class="step"> Step 3: </span> Site: {{user.site}}</p>

我知道该站点是一个数组，索引[0] =值，索引[1] =显示。

public sites = [
    { value: 'sunshine', display: 'Sunshine' },
];

如何只获取index [0]的值来显示JSON对象中的数组，而不是与“user.site”关联的整个JSON对象？

Answer 1

您正在分配对象而不是字符串。

解决方案1

<select name="site" [(ngModel)]="user.site">
    <option *ngFor="let site of sites" [ngValue]="site.value"> <===== site.value rather than site 
        {{site.display}}
    </option>
</select>

解决方案2

<p><span class="step"> Step 3: </span> Site: {{user.site.value}}</p>

Answer 2

这很完美。 [ngValue] =“site.value”，谢谢！