Question

我正在尝试学习如何执行CRUD操作，基本上我想将表单数据发布到服务器。我能够将一个值（在本例中为酒店名称）发布到服务器。我想了解如何发布具有多个值的整个表单。非常感谢您的帮助，我已经花费了大量时间。我想我现在需要帮助。

这些是我已经完成的事情：

为名称创建了一个简单的输入字段，并在处理程序中附加了一个提交按钮以获取值。文件名-Hotel.component.html
作为对click事件的响应，称为组件的click处理程序，称为add（使用下面定义的服务的文件-hotel.component.ts）
创建了一个酒店服务，以定义addhotel方法将此值发布到服务器。文件-hotel.service.ts。

Hotel.component.html 饭店名称：
```
  
  <button (click)="add(hotelName.value); hotelName.value=''">
    add
  </button>
</div>
```

Hotel.component.ts

import { Component, OnInit } from '@angular/core';
import { Hotel } from '../Hotel';
import { HotelService } from '../hotel.service';

@Component({
  selector: 'app-hotel',
  templateUrl: './hotel.component.html',
  styleUrls: ['./hotel.component.css']
})
export class HotelComponent implements OnInit {

  hotels: Hotel[];

  constructor(private hotelservice: HotelService) { }

  getHotels(): void {
    this.hotelservice.getHotels()
      .subscribe(data => this.hotels = data);
  }
  add(name: string): void {
    name = name.trim();

    if (!name) { return; }
    this.hotelservice.addhotel({ name } as Hotel)
      .subscribe(hotel => {
        this.hotels.push(hotel);
      });
  }

hotel.service.ts

/ ** POST：将新旅馆添加到服务器* /

addhotel(hotel: Hotel): Observable<Hotel> {
    return this.http.post<Hotel>(this.hotelsUrl, hotel, httpOptions).pipe(

      catchError(this.handleError<Hotel>('addHero'))
    );
  }

如何将表单数据（具有多个值）发布到服务器上？？

0 个答案: