表单第二部分中未定义的对象

Question

当我说财产时，我指的是房子。它是一个房地产网站。

我正在使用 Angular（后端的 Laravel API）创建一个应用程序。我有一个用于提交财产的 3 步表格。第一步，在我的广告服务中，我将当前属性设置为返回的模型数据。我可以 console.log 这个数据就好了。

但是，当我在提交表单的第二部分时 console.log 它。我收到一个未定义的错误。我做了这个对象的 ID 发送到 URL。

广告服务

  createAdvert(userId: number, property: Property) {
    return this.http.post(this.baseUrl + userId + '/store', {property}).pipe(
      map((response: any) => {
          this.currentProperty = response;
          console.log(response);
      })
    );
  }

我将服务注入表单的第二部分。我尝试调用当前属性和 console.log 它，但我得到未定义。

  submitPayment() {
    const currentProperty = this.advertService.currentProperty.id;
    console.log(currentProperty);
    if (this.advertPaymentForm.value) {
      this.payment = (Object.assign({}, this.advertPaymentForm.value));
      console.log(this.payment);
      this.advertService.createAdvertPayment(currentProperty.id, this.payment).subscribe(data => {
        this.alertify.success('Success');
      }, error => {
        this.alertify.error(error);
      });
    }
  }

属性模型

export interface Property {
    id?: number;
    town?: string;
    county?: string;
    address: string;
    postocde: string;
    eircode: string;
    property_type: string;
    selling_type: string;
    price: number;
    bedrooms: number;
    bathrooms: number;
    size: number;
    building_energy_rating: string;
    description: string;
    user_id: number;
}

编辑。 createAdvert的控制台数据

知道这里有什么问题吗？

完整的 advert.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from 'src/environments/environment';
import { Property } from '../_models/property';
import { User } from '../_models/user';
import { Payment } from '../_models/payment';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AdvertService {

  baseUrl = environment.apiUrl + 'advertisement/';
  currentProperty: any;

  constructor(private http: HttpClient) { }

  createAdvert(userId: number, property: Property) {
    return this.http.post(this.baseUrl + userId + '/store', {property}).pipe(
      map((response: any) => {
          this.currentProperty = response;
          console.log(this.currentProperty);
      })
    );
  }

  createAdvertPayment(propertyId: number, payment: Payment) {
    return this.http.post(this.baseUrl + propertyId + '/payment', {payment});
  }
}

完整的 advert-payment.component.ts（服务注入的地方）

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { AdvertService } from '../_services/advert.service';
import { AlertifyService } from '../_services/alertify.service';
import { AuthService } from '../_services/auth.service';
import { Payment } from '../_models/payment';

@Component({
  selector: 'app-advert-payment',
  templateUrl: './advert-payment.component.html',
  styleUrls: ['./advert-payment.component.css']
})

export class AdvertPaymentComponent implements OnInit {
  advertPaymentForm: FormGroup;
  model: any;
  payment: Payment;
  constructor(private advertService: AdvertService, private alertify: AlertifyService, public authService: AuthService,
    private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.createAdvertPaymentForm();
  }

  createAdvertPaymentForm() {
    this.advertPaymentForm = this.formBuilder.group({
      town: ['', Validators.required],
      county: ['', Validators.required],
      billing_address: ['', Validators.required],
      cardnumber: ['', Validators.required],
      month: ['', Validators.required],
      year: ['', Validators.required],
      cvv: ['', Validators.required],
    });
  }

  submitPayment() {
    const currentProperty = this.advertService.currentProperty[0].id;
    console.log(currentProperty);
    if (this.advertPaymentForm.value) {
      this.payment = (Object.assign({}, this.advertPaymentForm.value));
      console.log(this.payment);
      this.advertService.createAdvertPayment(currentProperty.id, this.payment).subscribe(data => {
        this.alertify.success('Success');
      }, error => {
        this.alertify.error(error);
      });
    }
  }

}

Answer 1

所以看到代码，您似乎从未在组件中订阅 createAdvert(userId: number, property: Property)，因此 currentProperty 从未从 HTTP 调用中获得值。

确保在你的组件OnInit中订阅这个：

ngOnInit() {
    this.createAdvertPaymentForm();
    this.advertService.createAdvert(YourUserId, UserProperty).subscribe(data => {
         console.log(data); // this will give you `currentProperty` data
     });
  }

在 Angular 中，http 请求返回 observable，所以你需要 subscribe。如果observable 没有任何订阅者，不会执行