如何在Angular 6中正确读取JSON中的值

Question

我再次绝望，根本无法得出结果，因为每个人在不同的环境中都有这个问题。

我正在尝试从JSON响应对象加载一个值，并将其输出到html输入字段中。然而，问题是，我加载的值总是被控制台定义为"未定义"。

所以我现在的问题是：如何正确地从JSON对象中读取值？

受影响的方法是updateEinsatzort()

注意：我对WebDevelopment和TypeScript完全陌生。

组件.ts

import { Component, OnInit } from '@angular/core';
import { EinsatzorteService } from '../einsatzorte.service'
import { EinsatzortModel } from '../einsatzortmodel'
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-einsatzorte',
templateUrl: './einsatzorte.component.html',
styleUrls: ['./einsatzorte.component.css']
})
export class EinsatzorteComponent implements OnInit {
einsatzorte$: Object;
model = new EinsatzortModel(null,'','','','','','','','','','');
einsatzortObjekt$: EinsatzortModel;
constructor(private einsatzorte: EinsatzorteService, private einsatzorteServ: EinsatzorteService) { }
ngOnInit() {
this.einsatzorte.getEinsatzorte().subscribe(
einsatzorte => this.einsatzorte$ = einsatzorte
)
}
newEinsatzort(form: NgForm) {
var einsatzortObjekt={
institutionsart: form.value.institutionsart,
name: form.value.name,
adresse: form.value.adresse,
plz: form.value.plz,
stadt: form.value.stadt,
land: form.value.land,
tel: form.value.tel
}
this.einsatzorte.createEinsatzorte(einsatzortObjekt).subscribe(
(response) => {console.log(response);}
);

window.location.reload()
}

deleteEinsatzort(id): void{
this.einsatzorte.deleteEinsatzort(id)
.subscribe(dataErsatz => {
this.einsatzorte$ = this.einsatzorte$;
})
window.location.reload()
}
updateEinsatzort(id: number, einsatzort: EinsatzortModel){
this.einsatzorteServ.readEinsatzort(id, einsatzort).subscribe(
updateObjekt => {
this.einsatzortObjekt$ = this.einsatzortObjekt$;
console.log(updateObjekt) // Gives me whole object with correct values
console.log() //<<<<===== here I want to have the <<name>> attribute of this value
}
)
}
}

型号

export class EinsatzortModel {
constructor(
public id:number,
public institutionsart: string,
public name: string,
public adresse: string,
public plz: string,
public stadt: string,
public land: string,
public ansprechpartner: string,
public tel: string,
public mobil: string,
public mail: string
){}
}

服务.ts

readEinsatzort(id: Number, einsatzort: EinsatzortModel){
return this.http.post('http://localhost:8080/einsatzort/einsatzort?id=' + id, einsatzort)
}

Answer 1

您需要使用POST而不是GET进行读取吗？我获取数据的Angular v6代码如下所示：

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, tap, map } from 'rxjs/operators';
import { IProduct } from './product';
@Injectable({
providedIn: 'root'
})
export class ProductService {
private productUrl = 'api/products/products.json';
constructor(private http: HttpClient) { }
getProducts(): Observable<IProduct[]> {
return this.http.get<IProduct[]>(this.productUrl).pipe(
tap(data => console.log('All: ' + JSON.stringify(data))),
catchError(this.handleError)
);
}
private handleError(err: HttpErrorResponse) {
// in a real world app, we may send the server to some remote logging infrastructure
// instead of just logging it to the console
let errorMessage = '';
if (err.error instanceof ErrorEvent) {
// A client-side or network error occurred. Handle it accordingly.
errorMessage = `An error occurred: ${err.error.message}`;
} else {
// The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong,
errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`;
}
console.error(errorMessage);
return throwError(errorMessage);
}
}

使用get:get<IProduct[]>上的泛型参数将结果映射到定义的接口。

但如果你想坚持你的风格，你可以试着强烈输入你的返回值并发布：

readEinsatzort(id: Number, einsatzort: EinsatzortModel): Observable<EinsatzortModel>{
return this.http.post<EinsatzortModel>('http://localhost:8080/einsatzort/einsatzort?id=' + id, einsatzort)
}

然后你应该能够读取这样的值：

console.log(updateObjekt.name);

Answer 2

有两个选项：

1.(在html中，你需要添加这个，例如

<div>{{einsatzortObjekt?.name}}</div>

有了这个，如果名称是未定义的，你的代码就不会中断

2.(创建空的域对象，因此属性不会是未定义的

型号

export class EinsatzortModel {
id: number
institutionsart: string
name: string
constructor( id?: number, institutionsart?: string, name?: string){
this.id = id
this.institutionsart = institutionsart
this.name = name
}
}

组件ts

export class EinsatzorteComponent implements OnInit {
einsatzorte$: Object;
model = new EinsatzortModel(); // Create empty model
...

组件html

<div>{{einsatzortObjekt.name}}</div> 

现在名称将不会是未定义的