Angular 角度5+；http post问题

我能够从驻留在本地主机上的JSON文件中很好地检索对象。然而，在邮寄时，我得到了

Cannot read property 'id' of undefined

在我传入的模拟对象上，如果我添加一个id属性和一些随机数，它就会工作。但我不想把身份证交给你

服务内容如下：

@Injectable()
export class TileService {

  tiles$ = new Subject<any>();
  details$  = new Subject<any>();
  messages$  = new Subject<any>();

  private tilesUrl = 'http://localhost:3000/tiles';

  private httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };

  constructor(private http: HttpClient) { }

  getTiles(): Observable<Tile[]> {
    return this.http.get<Tile[]>(this.tilesUrl);
  }

   createTile(t: Tile) {
    return this.http.post<Tile>(this.tilesUrl, t, this.httpOptions).subscribe(
      res => {
        console.log(res);
      },
      (err: HttpErrorResponse) => {
        console.log(err.error);
        console.log(err.name);
        console.log(err.message);
        console.log(err.status);
      }
    );
   }

}

我正在使用json服务器来允许本地主机上的REST操作

内容

---

有两种方法可以解决这个问题

如果您有权访问后端代码，可以将其更改为忽略接受请求的id字段。而是自动递增id字段

您可以在用户不输入id的情况下传递id

---

---

---

---

我希望这有帮助。如果它不工作，请随时评论。我就在那里。

我怀疑错误是在其他地方触发的，因为您没有访问id属性，至少在这里的代码中是这样。我的代码中没有传递的id，我的平铺模型也不需要它。@Jeremiah2911您刚才指出了错误。。。您应该提供服务器所需的内容显示我在不要求用户输入id的情况下做了什么？我想是吧。为什么服务器需要一个id呢？除非这是拥有磁贴独有属性的最佳方式。这需要知道您正在与哪个服务器通话，以及它的API谢谢。我喜欢您的解决方案，但不知道如何实现，因为后端设置是由Node的json服务器自动完成的。你的解决方案成功了。

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

export class AvailableTilesComponent implements OnInit {

  title = 'Available Tiles';

  tiles: Tile[];


  mockNewTile = {
    title: 'GO',
    description: 'Go is an open source programming language that makes it easy to build simple, reliable, and efficient software.',
    code: {
        snippetA: 'something here.',
        }
  };

  constructor(private tileService: TileService) { }

  ngOnInit() {
    this.tileService.getTiles().subscribe(x => this.tiles = x);
  }

  addTile(t: Tile) {
    this.tileService.tileStream(t);
    this.tileService.messageStream( t.title +  ' tile added.');
  }

  createTile() {
    this.tileService.createTile(this.mockNewTile);
  }
}

{
  "tiles": [
    {
      "title": Language A",
      "description": "Language A description.",
      "code": {
        "snippetA": "lang snippet a1",
        "snippetB": "lang snippet a2",
        "snippetC": "lang snippet a3"
      }
    },
       {
      "title": Language B",
      "description": "Language B description.",
      "code": {
        "snippetA": "lang snippet b1",
        "snippetB": "lang snippet b2",
        "snippetC": "lang snippet b3"
      }
    }
  ]
}

npm install uuid --save

import { v4 as uuid } from 'uuid';

 mockNewTile = {
      id : uuid(),
      title: 'GO',
      description: 'Go is an open source programming language that makes it easy to build simple, reliable, and efficient software.',
      code: {
          snippetA: 'something here.',
       }
   };