为什么这个Angular服务返回空值?

Question

因为这个服务返回一个空值，它不能把值压入数组。所以我必须手动刷新它的页面显示。这意味着后面可以工作，但前面不行。

addProduit(form: Formulaire): Observable<Produit>  {
console.log("3: " + form);
return this.http.post<Produit>(this.API_SERVER + '/produits',
form,
httpOptions
).pipe(
tap({
next: x => { console.log(x.formulaireJSON.id); },
error: err => { console.error(err) },
complete: () => { console.log('create Produit') }
}));
}

onSubmit(form: Formulaire) {
if (!form) { return; }
console.log("1: " + form);
this.produitService.addProduit(form)
.subscribe(produit => {
this.produits.push(produit);
console.log("2: " + produit);
});
}

form来自于formBuilder的值。(ngSubmit)="onSubmit(produitForm.value)"

export interface Produit {
id: number;
formulaireJSON: Formulaire;
}
export interface Formulaire {
id: number;
name: String;
formulaire: String[];
}

日志1:和日志3:有值，日志2:没有值。错误出现在next: x.ERROR TypeError: x is null

创建的JSON是正确的，因为它被正确添加到数据库中。

我哪里出错了?我在同一个项目中做了一些非常相似的事情，它工作得很好。

谢谢你的帮助。

编辑给出答案的元素，感谢Michael d:

我不明白的是返回的值是从后面来的。我以为是正面对正面。我认为后台工作得很好，因为我已经实现了请求的状态。

所以我只需要添加请求POST的返回值。

Answer 1

有很多事情需要考虑。

1. 当你试图使用点符号访问它的属性时，总是定义一个类型(至少any)

tap({
next: (x: Produit) => { console.log(x.formulaireJSON.id); },
error: err => { console.error(err) },
complete: () => { console.log('create Produit') }
})

2. 控制台日志的顺序可以是1,3和2。因为2^和控制台日志在订阅回调中，它可以在3^rd日志之后触发。

3. 如果你要使用.push()方法向数组添加新元素，Angular的变化检测机制将不会被触发，因为包含对象的变量的底层引用还没有被调整。你可以用析构来代替。

subscribe((produit: Produit) => {
this.produits = [...this.produits, produit];
console.log("2: " + produit);
})