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

Question

这是 json url: https://jsonplaceholder.typicode.com/todos

这是 json 结构：

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

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

Answer 1

    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>

Answer 2

查看我创建的工作 Plunker，它具有巧妙的 material 设计样式和一些简单的错误处理

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

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>

Answer 3

@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

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

Show json data in a dropdown in Angular2

json

angular2-forms

angular