Angular与Node.js：如何将接口返回数据解析为Plant对象

我一眼就揪出问题所在啦！你的Node.js服务器返回的单株植物数据是数组格式，但Angular的getPlant方法期望的是单个Plant对象，数据不匹配加上初始时plant是undefined，直接导致了模板里的报错。

问题根源拆解 #

先看你的Node.js接口代码：

app.get("/api/plants/:id", function(req, res) {
  const requestedID = req.params.id;
  connection.query('SELECT * FROM plant WHERE ID = ' + requestedID, function(err, rows, fields) {
    if (!err) res.send(rows); // 这里返回的是数组！哪怕只有一条数据
    else console.log('Error while performing Query.');
  });
});

MySQL的query方法返回的rows永远是数组结构——哪怕你只查到一株植物，返回的JSON也是[{"id":1, "name":"xxx", ...}]，但Angular的getPlant订阅后，是把这个数组赋值给了this.plant，模板里用plant.id就相当于在数组上找id属性，自然找不到；再加上数据加载完成前plant是undefined，直接触发了你看到的类型错误。

两步搞定问题 #

1. 修改Node.js接口，返回单个对象 #

把单株植物接口的res.send(rows)改成res.send(rows[0])，直接返回数组里的第一个元素（也就是你要的单株植物对象）：

app.get("/api/plants/:id", function(req, res) {
  const requestedID = req.params.id;
  // 额外提醒：用参数化查询避免SQL注入风险
  connection.query('SELECT * FROM plant WHERE ID = ?', [requestedID], function(err, rows, fields) {
    if (!err) res.send(rows[0]); // 返回单个对象而非数组
    else console.log('Error while performing Query.');
  });
});

2. 优化Angular模板，处理初始未加载状态 #

为了避免数据加载完成前的undefined报错，在模板里使用安全导航操作符（?.），这样当plant还未赋值时，不会尝试访问它的属性：

<!-- 把 {{plant.id}} 改成 {{plant?.id}}，其他属性同理 -->
<div *ngIf="plant"> <!-- 也可以用*ngIf先判断plant是否存在 -->
  <p>植物ID: {{plant?.id}}</p>
  <p>植物名称: {{plant?.name}}</p>
</div>

这样修改后，你的植物详情组件就能正常解析并展示数据啦！

内容的提问来源于stack exchange，提问作者Xleg