Question

contact.service.ts

import { Injectable } from "@angular/core";
import { Http, Response, Headers, RequestOptions } from "@angular/http";
import { Observable } from "rxjs/Rx";
import 'rxjs/add/operator/map';

@Injectable()
export class ContactService {

  constructor(private http: Http) { }

  getContacts() {
    return this.http.get('/app/contact.json').map((res: Response) => res.json());
  }

  createContact(contact) {
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    let body = JSON.stringify(contact);
    return this.http.post('./api/contact/', body, options).map((res: Response) => res.json());
  }
}

与-bar.component.ts

import { Component, OnInit } from '@angular/core';
import { ContactService } from '../services/contact.service';
import { Observable } from 'rxjs/Rx';

@Component({
  selector: 'app-contact-bar',
  templateUrl: './contact-bar.component.html',
  styleUrls: ['./contact-bar.component.css']
})
export class ContactBarComponent implements OnInit {

  public contacts;

  constructor(private contactService: ContactService) { }

  ngOnInit() {
    this.getContacts();
  }

  getContacts() {
    this.contactService.getContacts().subscribe(
      data =>  this.contacts = data ,
      err => console.error(err),
      () => console.log('done'));
  }

  createContact(name) {
    let contact = {name: name};
    this.contactService.createContact(contact).subscribe(
      data => {
        // refresh the list
        this.getContacts();
        return true;
      },
      error => {
        console.error("Error saving food!");
        return Observable.throw(error);
      });
  }
}

与-BAR-component.html

<div class="container">
  <h4>CONTACTS</h4>
</div>
<div class="contact-list">
  <div class="contacts">
    <ul *ngFor="let contact of contacts">
      <li>
        <h3>{{contact.name}}</h3>
        <p id="email">{{contact.email}}</p>
        <p>{{contact.mobile}}</p>
      </li>
   </ul>
</div>

<input type="text" name="name" [(ngModel)]="name">
<button (click)="createContact(name)">Create</button>

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 { appRouting } from './app.routing';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { ContactBarComponent } from './contact-bar/contact-bar.component';
import { AddContactComponent } from './add-contact/add-contact.component';
import { ContactDetailsComponent } from './contact-details/contact-details.component';
import { HomeComponent } from './home/home.component';
import { ContactService } from './services/contact.service';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    ContactBarComponent,
    AddContactComponent,
    ContactDetailsComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    appRouting,
  ],
  providers: [ ContactService ],
  bootstrap: [ AppComponent]
})
export class AppModule { }

错误： zone.js：2019 POST http://localhost:4200/api/contact/ 404（未找到）

帮助我，我缺乏背后的地方。提前谢谢

Answer 1

首先，如果你想在静态文件中的json文件中存储日期是不可能的，你应该有它的服务器端逻辑

第二，如果你想使用./api/contact/，你应该在角应用程序中定义/ api / contact / route。但是，如果再次执行此操作，则无法使用Angular Component返回任何Response。

我认为您可能会错误地在网址开头使用.。如果没有，您可以使用Angular Services来实现此

考虑您是否使用.，邮寄请求将发送到您的角度应用程序而不是您的服务器。

无法使用角度2将用户输入数据存储在JSON文件中

1 个答案: