*ngFor不工作(角4)

Question

我已经导入了所需的模块，也检查了错误，但是没有任何帮助。我刚开始学角质，还在学习。

这是我的app.module.ts文件

 import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { HttpModule } from '@angular/http';
    import { CommonModule } from "@angular/common";

    import { AppComponent } from './app.component';
    import { ContactsComponent } from './contacts/contacts.component';


    @NgModule({
        declarations: [
        AppComponent,
        ContactsComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        CommonModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { } 

下面是代码中不起作用的部分，但也不能处理抛出的任何错误。

<div class="container">
  <div *ngFor = "let contact of contacts" >
        <div class = "col-md-3">
          {{contact.first_name}}
        </div>
        <div class = "col-md-3">
            {{contact.last_name}}
        </div>
        <div class = "col-md-3">
              {{contact.phone}}
        </div>
        <div class = "col-md-3">
                <input type="button" (click)="deleteContact(contact._id)" value ="Delete" class="btn btn-danger" />
        </div>
   </div>
</div>   

更新：--我包含了我的contact.srevice.ts文件。

   import { Injectable } from '@angular/core';
import {Http, Headers} from '@angular/http';
import {Contact} from './contact';
import 'rxjs/add/operator/map';
import {Observable} from 'rxjs/Observable';
@Injectable()
export class ContactService {

  constructor(private http: Http) { } 
  //retrieving contact_service

    getContacts() :Observable<any[]>
    {
      return this.http.get('http://localhost:3000/api/contacts')
      .map(res => res.json());
    }

    //add contact method
    addContact(newContact){
      var headers = new Headers();
      headers.append('Content-Type','application/json');
      return this.http.post('http://localhost:3000/api/contact', newContact, {headers:headers})
      .map(res=>res.json());
    }

    //delete Contact Method
    deleteContact(id){
      return this.http.delete('http://localhost:3000/api/contact/'+id)
      .map(res=>res.json());
    }
}

网络活动

Answer 1

按照您的.ts代码，您需要像这样将一些数据绑定到名为contacts的对象中才能正常工作

contacts = [
    {first_name: "Pardeep", last_name: "Jain", phone: '90'},
    {first_name: "Pardeep", last_name: "Jain", phone: '90'},
    {first_name: "Pardeep", last_name: "Jain", phone: '90'}
  ]

工作实例

更新

不管你从这个服务中得到什么，你都需要绑定数据-

ngOnInit() {
      this.service.getContacts()
       .subscribe(data=> this.contacts = data)
    }

Answer 2

你需要这样做

import { Component } from '@angular/core'; 
import {Contact} from './contact';

 @Component({ 
selector: 'app-root', 
templateUrl: './app.component.html', 
styleUrls: ['./app.component.css'] }) 
export class AppComponent  implements OnInit
{ 
     title = 'New App';
     contacts: Contact[];

     ngOnInit() {
      this.service.getContacts()
       .subscribe(data=> this.contacts = data)
    }
} 

contact.service.ts文件

    //make use of newer api of http 
    import { HttpClient, HttpHeaders } from '@angular/common/http';

 export class ContactService {

    constructor(private http: HttpClient) { } 
    getContacts()  :Observable<Contact[]>
    { 
      return 
       this.http.get<Contact[]>('http://localhost:3000/api/contacts');
    }



addContact(newContact) {
 const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
  })
 };

  return this.http.post('http://localhost:3000/api/contact', newContact, httpOptions)
    .map(res=>res.json());
}
 }