发布AngularCli不起作用

时间:2018-04-04 14:32:56

标签: typescript http post angular-cli

AngularCli人

由于某些原因,我向mockApi添加新对象/输入的帖子不起作用,至少我的Api保持不变。 我的代码有什么问题或为什么它不起作用?

如果需要进一步的详细信息,请告诉我。

添加到api.component.html



Can't locate object method "name" via package "P1" at ./p.pl line 8.




接下来是add-to-api.component.ts,这个组件是通过router-outlet / routerLink的另一个组件的一部分,因此有更多的导入,而不是在这个.ts < / p>

&#13;
&#13;
 {{diagnostic}}
  <div class="container">
      <h1>Add to Api</h1>
      <form (ngSubmit)="addToApi(devicemgForm.value)" #devicemgForm="ngForm">
        <div class="form-group">
          <label for="hitInfo">HitInfo</label>
          <!-- HitInfo är Name i guiden -->
          <input type="text" class="form-control" id="hitInfo" required [(ngModel)]="model.HitInfo" name="hitInfo" #hitInfo="ngModel">
          <div [hidden]="hitInfo.valid || hitInfo.pristine" class="alert alert-danger">Fältet måste fyllas i</div>
        </div>

        <div class="form-group">
          <label for="repairStatus">RepairStatus</label>
          <!-- RepairStatus är Alter Ego i guiden -->
          <input type="text" class="form-control" id="repairStatus" required [(ngModel)]="model.RepairStatus" name="repairStatus" #repairStatus="ngModel">
          <div [hidden]="repairStatus.valid || repairStatus.pristine" class="alert alert-danger">Fältet måste fyllas i</div>
        </div>

        <div class="form-group">
            <label for="reported">Reported</label>
            <!-- Reported är powers i guiden -->
            <select class="form-control" id="reported" required [(ngModel)]="model.Reported" name="reported">
              <option *ngFor="let rep of reported" [value]="rep">{{rep}}</option>
            </select>
          </div>


        <!-- <button type="submit" class="btn btn-success" [disabled]="!devicemgForm.form.valid">Submit</button> -->
        <button type="submit" class="btn btn-success" [disabled]="!devicemgForm.valid">Submit</button>


        <button type="button" class="btn btn-default" (click)="devicemgForm.reset()"
           >Rensa formulär</button>

      </form>
  </div>
&#13;
&#13;
&#13;

我使用的服务类是get-api.sevice.ts

&#13;
&#13;
import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import {Devicemg} from '../devicemg';
import { GetApiService } from '../get-api.service';



@Component({
  selector: 'app-add-to-api',
  templateUrl: './add-to-api.component.html',
  styleUrls: ['./add-to-api.component.css']
})
export class AddToApiComponent implements OnInit {
  kurtan = [];
  reported = ['true', 'false'];

  model = new Devicemg ();


  get diagnostic() { return JSON.stringify(this.model); }

  constructor(private _getApiService: GetApiService) { }

  ngOnInit() {

  }


    addToApi(devicemg: Devicemg) {
      this._getApiService.addApi(devicemg).subscribe();
    }

}
&#13;
&#13;
&#13;

app模块

&#13;
&#13;
import { Injectable } from '@angular/core';
import { Devicemg } from './devicemg';
import { HttpClient, HttpErrorResponse, HttpResponse, HttpHeaders } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs/Observable';
import { NgForm } from '@angular/forms';

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    // 'Authorization': 'my-auth-token'
  })
};

@Injectable()
export class GetApiService {

  // private mainmenuUrl = 'https://logmanagementtool.azurewebsites.net/api/loganalysis/getall';

  private jMockApi = 'http://demo8609839.mockable.io/johansmockapi';

  constructor(private httpClient: HttpClient) { }

  public getApi(): Observable<any> {
    return this.httpClient.get(this.jMockApi)
    .pipe(map((response: Response) => response));

  } // ska inte ha .json() på slutet då detta görs automatiskt nuförtiden på Response i angular


  public deleteIdFromApi (id: number): Observable<{}> {
    const url = this.jMockApi + '/' + id;
    return this.httpClient.delete(this.jMockApi, httpOptions).pipe(map((response: Response) => response));
  }


  public addApi (devicemg: Devicemg): Observable<any> {
    return this.httpClient.post<Devicemg>(this.jMockApi, devicemg, httpOptions);
  }


}
&#13;
&#13;
&#13;

帮助理解为什么它不会改变我的api:http://demo8609839.mockable.io/johansmockapi

由于

0 个答案:

没有答案