2016-09-19 3 views
-3
items.component.ts 

    import {Component, OnInit} from '@angular/core'; 
    import {Item} from './Item'; 
    import {ItemService} from "./item.service"; 
    import {Router} from "@angular/router"; 

    @Component({ 
     moduleId: module.id, 
     selector: 'my-items', 
     templateUrl: 'template/items.component.html', 
     styleUrls: ['template/items.component.css'] 
    }) 
    export class ItemsComponent implements OnInit { 
     errorMessage: string; 
     title = 'Hero Tour'; 
     items: Item[]; 
     selectedItem: Item; 

     constructor(private router: Router, private itemservice: ItemService) { 

     } 

     onSelect(item: Item) { 
     this.selectedItem = item; 
     } 

     ngOnInit() { 
     this.itemservice.getItems().subscribe(items=>this.items = items); 
     //if not comment this can call api add new item and push it into array 
     //this.itemservice.create('Test Add').subscribe((item:Item)=>this.items.push(item)); 
     } 

     goDetail(): void { 
     let link = ['/detail', this.selectedItem.ItemId]; 
     this.router.navigate(link); 
     } 

     addItem(name: string): void { 
     name = name.trim(); 
     if (!name) { 
      return; 
     } 

     this.itemservice.create(name).subscribe(
      (item: Item) => this.items.push(item), 
      (error: any) => { 
      this.errorMessage = <any>error; 
      console.log(this.errorMessage); 
      console.log('xxxxxxxxxxxxxxxx'); 
      this.router.navigate(['/items']) 
      }, 
     ()=>this.router.navigate(['/items']) 
     ); 


     } 

    } 


items.component.html 
    <div> 
     <label>Item Name:</label><input #itemNane> 
     <button (click)="addItem(itemNane.value); itemNane.value=''">Add</button> 
    </div> 
    <h2>My Items</h2> 
    <ul class="heroes"> 
     <li *ngFor="let item of items" [class.selected]="item===selectedItem" (click)="onSelect(item)"> 
     <span class="badge">{{item.ItemId}}</span>{{item.ItemName}} 
     </li> 
    </ul> 
    <div *ngIf="selectedItem"> 
     <h2>{{selectedItem.ItemName | uppercase}} is my item</h2> 
     <button (click)="goDetail()">View Details</button> 
    </div> 

когда в ngOnInit() использовать
this.itemservice.create ('Test Добавить') подписаться ((пункт:. П) => this.items.push (пункт)
можно назвать веб-апи добавить новый элемент под названием «Test Добавить»
но когда я нажмите кнопку Добавить
, на дисплее запрос на FireFox консоли, но сервер не получил этот запрос, а затем перенаправить на индекс firefox console log errorугловой 2 HTTP код состояния запроса 0

+0

Если вы раскомментируете код с' ngOnInit', это ударит API? – micronyks

+0

uncomment code from ngOnInit, call web api, может добавлять новый элемент и вставлять его в массив, массив также через api get – yiji

ответ

0

когда я добавляю ошибку атрибута типа фиксирован < button type = "button" (click) = "addItem (itemNane.value); itemNane.value = '' "> Добавить </button>

Смежные вопросы