Angular 5中如何通过HttpClient更新后获取返回对象

这个问题我之前也碰到过！你现在拿到的{n: 1, nModified: 1, ok: 1}其实是MongoDB updateOne()方法默认返回的操作状态结果——它只会告诉你更新操作的执行情况（比如更新了1条数据、操作成功），并不会返回你需要的更新后的联系人对象。要在前端拿到更新后的对象来同步视图，得从后端API入手调整，具体方案如下：

1. 修改后端API逻辑，返回更新后的文档 #

把updateOne替换成findByIdAndUpdate（Mongoose提供的方法），并加上{ new: true }选项——这个选项会让方法返回更新后的完整文档，而不是更新前的或者操作状态。

修改后的后端代码：

router.put('/:id', async (req, res) => {
  try {
    // 使用findByIdAndUpdate，通过new: true返回更新后的文档
    const updatedContact = await Contact.findByIdAndUpdate(
      req.params.id,
      { firstname: req.body.firstname, phone: req.body.phone },
      { new: true } // 关键配置：返回更新后的对象
    );
    
    if (!updatedContact) {
      // 处理找不到对应联系人的情况
      return res.status(404).json({ error: 'Contact not found' });
    }
    
    res.json(updatedContact);
  } catch (err) {
    debug(err.message);
    res.status(500).json({ error: err.message }); // 建议返回错误状态码，方便前端处理
  }
})

如果你的项目用的是原生MongoDB驱动而非Mongoose，需要把选项改成{ returnDocument: 'after' }，逻辑是一样的。

2. 前端代码优化（可选但推荐） #

你的前端ContactService里的Update方法用了async/await包裹http.put，但HttpClient的方法本身返回的是Observable，不需要额外的async/await，可以简化一下：

修改后的ContactService：

export class ContactService {
  url: string = 'http://localhost:3000/contacts/';
  constructor(private http: HttpClient) { }

  // 直接返回Observable<Contact>，去掉不必要的async
  update(contact: Contact): Observable<Contact> {
    return this.http.put<Contact>(`${this.url}${contact._id}`, contact);
  }
}

然后在ContactComponent里，订阅后就能直接拿到更新后的对象，用来同步视图：

export class ContactComponent implements OnInit {
  // 假设你组件里有一个存储当前联系人的变量
  contact: Contact;

  update() {
    this.contactService.update(this.contact).subscribe({
      next: (updatedContact) => {
        console.log(updatedContact); // 现在这里就是更新后的完整联系人对象了
        // 把更新后的对象赋值给组件变量，视图会自动同步
        this.contact = updatedContact;
      },
      error: (err) => {
        // 别忘了处理错误情况
        console.error('更新联系人失败:', err);
      }
    });
  }
}

备选方案（如果坚持用updateOne） #

如果你不想替换updateOne，也可以在更新操作完成后，额外调用一次findById去查询更新后的文档，不过这种方式需要两次数据库操作，效率不如findByIdAndUpdate高：

router.put('/:id', async (req, res) => {
  try {
    const updateResult = await Contact.updateOne(
      { _id: req.params.id },
      { firstname: req.body.firstname, phone: req.body.phone }
    );
    
    if (updateResult.n === 0) {
      return res.status(404).json({ error: 'Contact not found' });
    }
    
    // 更新完成后查询最新的文档
    const updatedContact = await Contact.findById(req.params.id);
    res.json(updatedContact);
  } catch (err) {
    debug(err.message);
    res.status(500).json({ error: err.message });
  }
})

这样调整后，前端subscribe里就能拿到更新后的联系人对象，直接用来更新视图啦！

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