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

Posted 2023-03-13

【中文标题】如何仅获取 index[0] 的值以显示 JSON 对象中的数组？

【英文标题】：How do I get only the value of index[0] to display of an array in a JSON object?

【发布时间】：2018-10-26 22:04:54

【问题描述】：

我在下面列出的 user.ts 文件中有一个 JSON 对象“用户”：

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 对象？

【问题讨论】：

你能在codepen上发布一个模拟链接吗？这里有一些令人困惑的地方。首先，this.user 真的是 json 吗？它看起来像一个普通的物体。我不确定“我知道该站点是一个数组，索引 [0] = 值，索引 [1] = 显示”是什么意思。 Sites 是您的 ngFor 将迭代以创建每个选项元素的数组，但该站点不是数组，它不会有索引。除此之外，这可能就像将您的 ngValue 更改为指向“site.value”一样简单。

效果很好。 [ngValue]="site.value"，谢谢！

【参考方案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>