在 Angular2 的下拉列表中显示 json 数据

Posted 2023-03-13

【中文标题】在 Angular2 的下拉列表中显示 json 数据

【英文标题】：Show json data in a dropdown in Angular2

【发布时间】：2017-10-25 22:35:58

【问题描述】：

这是 json 网址：https://jsonplaceholder.typicode.com/todos

这是json结构：

    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
  ,

我希望在下拉列表中显示所有title。

【问题讨论】：

请分享您到目前为止尝试过的内容并指出问题出在哪里。

@user2828442 查看我的回答和下方 Plunker 上的现场演示，如果您仍有任何问题，请告诉我 :)

【参考方案1】：

查看我使用流畅的材料设计样式和一些简单的错误处理创建的工作 Plunker

Here

在您的组件中，您执行以下操作：

import Component, OnInit from '@angular/core';
import Http from '@angular/http';
import 'rxjs/Rx'

@Component(
  selector: 'material-app',
  templateUrl: 'app.component.html',
  styles: [`
  div 
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: start;
    margin-top: 1rem;
  
  `]
)
export class AppComponent 
  constructor(private http:Http) 
    this.http.get('https://jsonplaceholder.typicode.com/todos')
      .subscribe(res => this.items = res.json(),
    err => console.error('Error: ' + err),
    () => console.log('Voila! you got your list!'));
  

然后在你的模板中添加这个：

<md-toolbar color="primary">
<h4>Show json data in a dropdown in angular2 - Hamed</h4>
</md-toolbar>

<div> 
<button md-button [mdMenuTriggerFor]="menu">data dropdown menu</button>
<md-menu #menu="mdMenu">
  <button md-menu-item *ngFor="let item of items" [value]="item?.title">item?.title</button>
</md-menu>
  </div>

【参考方案2】：

@Component(
  selector: 'my-app',
  template: `
    <select>
      <option  *ngFor="let item of items" [value]="item.title">item.title</option>
    </select>
  `,
)

export class App 
  items : any;
  constructor(private http:Http) 
    this.http.get('https://jsonplaceholder.typicode.com/todos')
      .subscribe(res => this.items = res.json());
  

工作plunkr

【参考方案3】：

    let todos = "the json data " // make a http call to subscribe to the data

    <select [ngModel]="selectedtitle" (ngModelChange)="onChange($event)" name="select">
        <option [value]="i" *ngFor="let i.title of todos">i</option>
    </select>