Angular联系人项目从db.json取数据仅显示[]问题求助

核心问题：模板字符串语法错误 #

你的ContactService中所有使用变量拼接URL的地方，都错误地使用了单引号包裹字符串，而模板字符串（${variable}语法）必须用反引号（`）包裹才能生效。这导致请求的URL是字面量${this.serverUrl}/contacts，而非实际的http://localhost:9000/contacts，请求失败后contacts数组保持初始空状态，页面因此显示[]。

修正步骤 #

1. 修复所有模板字符串的引号类型 #

将ContactService中所有包含${}的字符串从单引号替换为反引号：

修正后的getAllContacts方法示例：

public getAllContacts():Observable<IContact[]> {
  let dataUrl: string = `${this.serverUrl}/contacts`; // 用反引号替代单引号
  return this.httpClient.get<IContact[]>(dataUrl).pipe(catchError(this.handleError));
}

同理，以下方法中的dataUrl都需要做相同修改：

• getContacts
• createContacts
• updateContacts
• deleteContact
• getAllGroups
• getGroup

同时修复错误处理中的模板字符串：

public handleError(error:HttpErrorResponse){
  let errorMessage:string = '';
  if(error.error instanceof ErrorEvent){
    // 客户端错误
    errorMessage = `Error : ${error.error.message}`; // 反引号
  } else {
    // 服务端错误
    errorMessage = `Status : ${error.status} \n Message: ${error.message}`; // 反引号
  }
  return throwError(() => errorMessage);
}

2. 验证Json-Server状态 #

确保你的json-server正在运行，且访问http://localhost:9000/contacts能正常返回联系人数据（可直接在浏览器地址栏访问测试）。

3. 可选：添加错误信息展示 #

在contact-manager.component.html中添加错误提示，方便后续排查问题：

<div *ngIf="errorMessage" class="alert alert-danger mt-3">
  {{ errorMessage }}
</div>
<pre>{{contacts | json}}</pre>

完成以上修改后，重启Angular应用，应该就能正常加载并显示联系人数据了。

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