使用MongoDB、NodeJS和Angular5通过表单用户输入获取指定记录

让我帮你拆解一下这个错误的核心原因，然后一步步解决它：

首先，两个关键错误导致了这个问题： #

1. HTTP请求URL完全写错了 #

在keys.service.ts的getKeys方法里，你写的URL是：

`/api/keys/:key${typeKey}`

这会生成完全不符合后端路由预期的地址——比如如果用户输入的typeKey是"test"，请求地址会变成/api/keys/:keytest，而后端的路由/keys/:key期望的是/api/keys/test这种格式（:key只是参数占位符，实际请求时要替换成真实的key值）。因为请求地址错误，后端找不到匹配的记录，返回null，前端自然就会报错“无法读取null的key属性”。

2. 前端解析逻辑与后端返回不匹配 #

后端api.js中，当findOne找到记录时，直接返回了整个文档对象res.json(keys)；如果没找到，就返回null。而你的service里直接去读result.json().key——如果返回的是null，这行代码必然抛出类型错误。

分步解决步骤： #

1. 修正Service的请求URL与解析逻辑 #

把keys.service.ts的getKeys方法改成这样：

@Injectable()
export class KeysService {
  result: any;
  constructor(private _http: Http) {}

  getKeys(typeKey) {
    // 正确拼接URL：把typeKey作为路由参数替换占位符
    return this._http.get(`/api/keys/${typeKey}`)
      .map(result => {
        const responseData = result.json();
        // 增加空值判断，避免读取null的属性
        return responseData ? responseData.key : null;
      });
  }
}

2. 优化后端API的返回逻辑（可选但推荐） #

当前后端在找不到记录时直接返回null，前端很难区分是数据库错误还是无匹配数据。可以优化api.js的逻辑，明确返回状态：

// Response handling
let response = { status: 200, key: [], message: null };
router.get('/keys/:key', (req, res, next) => {
  connection((db) => {
    db.collection('keys')
      .findOne({key: req.params.key})
      .then((keys) => {
        if (keys) {
          response.key = keys;
          res.json(keys);
        } else {
          // 无匹配记录时返回404状态和提示
          res.status(404).json({ message: 'No matching key found' });
        }
      })
      .catch(err => {
        return next({ status: 500, message: 'Database query failed'})
      });
  });
});

3. 前端组件增加错误处理 #

在调用getKeyClass方法时，要订阅Observable并处理异常情况，避免页面崩溃：

// 假设这是你的组件代码
keySpelling: string = '';
typeKey: string = '';

constructor(private keysService: KeysService) {}

getKeyClass(typeKey) {
  this.keysService.getKeys(typeKey)
    .subscribe({
      next: (key) => {
        this.keySpelling = key ? key : 'No matching key found';
      },
      error: (err) => {
        console.error('Error fetching key:', err);
        this.keySpelling = 'Failed to retrieve key. Please try again.';
      }
    });
}

额外注意事项： #

• 确保你的Angular模块中导入了FormsModule，否则[(ngModel)]双向绑定无法正常工作。
• 检查MongoDB中keys集合的文档结构，确保每个文档都包含key字段，避免找到记录后却读取不到属性。

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