Angular 7/json 服务器：发布请求只接受 id

Posted 2023-03-27

【中文标题】Angular 7/json 服务器：发布请求只接受 id

【英文标题】：Angular 7/json server: post request only accepts id

【发布时间】：2019-10-12 12:51:38

【问题描述】：

我正在使用 Angular 7 和 json-server；目前我可以成功使用 get 和 delete 方法，但 post 方法只是发布 id 并忽略同一类的其他 3 个属性

主页 html

 <form (ngSubmit)="addUser()" class="col-md-6 offset-md-3">
      <div class="row">
        <div class="col-md-6 offset-md-3">
          <input required class="form-control top-dist" placeholder="name" type="text" [(ngModel)]="hero.name" name="name" />
        </div>

        <div class="col-md-6 offset-md-3">
          <input required type="number" class="form-control top-dist"  placeholder="age" name="age" [(ngModel)]="hero.age"/>
        </div>

        <div class="col-md-6 offset-md-3">
          <input required name="email" class="form-control top-dist" type="email"  placeholder="email" [(ngModel)]="hero.email" />
        </div>

        <div class="col-md-6 offset-md-3 text-center">
          <div >
            <input type="submit" value="submit" class="btn btn-danger top-dist " />
          </div>
        </div>
      </div>
    </form>

首页 TS：

export class HomeComponent implements OnInit 
  heroes: Hero[];
  hero: Hero = 
    id: null,
    name: null,
    age: null,
    email:null
  ;
  constructor(private dataService: DataService) 

  

  ngOnInit() 
    this.getHeroes();
  

  getHeroes() 
    this.dataService.getHeroes().subscribe(data => 
      this.heroes = data;
      console.log(data)
    )
  
  addUser()
    if(this.hero.name!=null && this.hero.age!=null && this.hero.email!=null)
    this.dataService.addUser(this.hero).subscribe((data: Hero)=>console.log(data))
      
  ;

服务：

addUser(user: Hero)
  console.log(user) ---> logs all fields
  if(user.id===null)
    return this.http.post<Hero>(this.url, user,  
      headers: new HttpHeaders (
        'Content-Type':'aplication/json'
      )

    )
    

在服务中，我可以看到所有用户的字段都已登录到控制台，但回到 home 组件，记录订阅的 observable，我只能看到 ID，因此之后只呈现 id。有人可以帮忙吗？

这是家的日志。前四个写在文件中，其他的写在 post 请求中：

【问题讨论】：

API 端点的返回类型是什么？

我要用快照编辑

【参考方案1】：

我的猜测是 API 端点设置为仅在 POST 请求上返回 Id，这是一种常见模式。要绕过覆盖您的其他对象属性，您可以尝试一件事：

this.dataService.addUser(this.hero).subscribe(
    (data: id) => this.hero = Object.assign(, this.hero,  id: id )
)

【讨论】：

它不接受数据类型 id，所以我尝试了 ` (data: Hero) => this.hero = Object.assign(, this.hero, hero: Hero )) ` 但是它没有工作......

Hero 类型没有 id 属性？我想问题变成了——为什么我们需要从服务器重新分配任何东西？为什么不：.subscribe()？

type Hero有id，type是number。至于订阅，我不做吗？

你在做订阅，我的意思是更多，为什么要把任何逻辑放在订阅块中？如果我们不需要对数据做任何事情。但是如果 Hero 确实有一个 id 属性，我们应该分配给它。所以当你说it doesnt accept data type id时我很困惑。

在订阅方法中，我刚刚记录了数据，它只带有 id...我丢失了