请求的路径在索引 1 处包含未定义的段，无法正确传递 id

Question

我的 Angular 应用程序有一些问题。

简而言之，我创建了一个FormInput 类型的对象，它存储了表单中的所有数据。单击按钮后，我想执行两个操作：

1. 保存FormInput 对象并
2. 使用我刚刚创建的对象的 ID 导航到新页面。

我的代码保存了对象，但是当我调用我的函数导航到另一个页面时，我传递的 id 是undefined。我不知道如何从当前创建的对象中正确获取 id 并将其传递给函数进行导航。

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
  forminput: Forminput = new Forminput();
  shops: Array<Shop> = [];
  products: Array<Product> = [];
  shop: Shop;
  product: Product;
  exampleForm: FormGroup;
  submitted = false;
  constructor( private formBuilder: FormBuilder, private formService: FormService, private router: Router){}

  get f() { return this.exampleForm.controls; }
  onSubmit() {
    this.submitted = true;
    if (this.exampleForm.invalid) {
      return;
    }
    if (this.submitted)
    {
      this.save();
    }
    this.goToDocument(this.forminput.id);    // here it is undefined 
  }

  save() {
    this.forminput.shopid = this.shop.id;
    this.forminput.productid = this.product.id;
    this.formService.createInputForm(this.forminput)
      .subscribe(data => {
        console.log(data);
        },
            error => console.log(error)
      );
  }

  ngOnInit() {
    this.exampleForm = this.formBuilder.group({
      firstName: ['', [Validators.required]],
      secondName: ['', [Validators.required]],
      familyName: ['', [Validators.required]],
      shop: ['', [Validators.required]],
      products: ['', Validators.required]
    });
    this.getShops();
  }

  fireGetShopProducts(){
    console.log(this.shop.id);
    this.getShopProducts(this.shop.id);
  }

  getShopProducts(id: number){
    this.formService.getShopProducts(id)
      .subscribe(
        (product: Array<Product>) => {
          console.log(product);
          this.products = product;
        },
        error => console.log(error)
      );
  }

  getShops(){
    this.formService.getListShops()
      .subscribe(
        (shops: Array<Shop>) => {
          console.log(shops);
          this.shops = shops;
        },
        error => {
          console.log(error);
        }
      );
  }

  goToDocument(id: number){
    this.router.navigate(['document', id]);
  }
}

Answer 1

1. 您在哪里将 id 分配给 this.forminput ？
2. 看起来你应该 goToDocument() if this.submitted = true 所以把这一行放在 if ，在 save() 下方

Answer 2

感谢您的回答。我解决问题。我只是在 save() 函数中进行调用，它开始正常工作：

  save() {
    this.forminput.shopid = this.shop.id;
    this.forminput.productid = this.product.id;
    this.formService.createInputForm(this.forminput)
      .subscribe((data: Forminput) => {
        this.id = data.id;
        this.goToDocument(this.id);
        },
            error => console.log(error)
      );
  }

然而，这有点奇怪，因为如果从 save() 中剪下 this.goToDocument(this.id); 行，并在调用 save() 后将其放入 onSubmit() 中，它就会停止工作。