Angular展示Django Rest Framework JSON数据求助（新手入门）

嗨，作为AngularJS新手完全不用不好意思，咱们一步一步来搞定这个数据展示的问题😉 结合你提到的几个文件，我给你梳理下具体的实现步骤：

1. 定义数据模型（bar-details.ts） #

先给返回的酒吧数据定义一个类型，方便后续代码做类型约束和提示：

export interface Bar {
  pk: number;
  name: string;
  description: string;
}

2. 封装API请求Provider（bar-details.provider.ts） #

这个Provider专门用来处理和Django Rest Framework后端的交互，咱们在这里实现获取固定pk=1数据的方法：

import { Bar } from './bar-details';

angular.module('yourAppName')
  .provider('barDetailsProvider', function() {
    this.$get = ['$http', function($http: ng.IHttpService) {
      return {
        getBarDetails: function(): ng.IPromise<Bar> {
          // 替换成你实际的DRF接口地址，比如/api/bars/1/
          return $http.get('/api/bars/1/')
            .then(response => response.data as Bar);
        }
      };
    }];
  });

3. 实现Component业务逻辑（bar-details.component.ts） #

在Component里注入上面的Provider，调用接口获取数据，并把数据绑定到组件实例上：

import { Bar } from './bar-details';

angular.module('yourAppName')
  .component('barDetails', {
    templateUrl: 'bar-details.component.html',
    controller: ['barDetailsProvider', function(barDetailsProvider) {
      const vm = this;
      vm.bar: Bar | null = null;
      vm.error: string | null = null;

      // 组件初始化时触发数据请求
      vm.$onInit = function() {
        barDetailsProvider.getBarDetails()
          .then(bar => {
            vm.bar = bar;
          })
          .catch(error => {
            vm.error = '获取酒吧详情失败：' + (error.data?.detail || error.statusText);
          });
      };
    }],
    controllerAs: 'vm'
  });

4. 编写HTML展示模板（bar-details.component.html） #

最后在模板里渲染数据，同时处理加载中和错误状态：

<!-- 错误提示 -->
<div ng-if="vm.error" class="alert alert-danger">
  {{ vm.error }}
</div>

<!-- 加载状态 -->
<div ng-if="!vm.bar && !vm.error" class="loading-text">
  正在加载酒吧详情...
</div>

<!-- 详情内容展示 -->
<div ng-if="vm.bar" class="bar-details-card">
  <h2>{{ vm.bar.name }}</h2>
  <p><strong>酒吧ID:</strong> {{ vm.bar.pk }}</p>
  <p><strong>酒吧描述:</strong> {{ vm.bar.description }}</p>
</div>

几个注意事项 #

• 记得把代码里的yourAppName替换成你实际的AngularJS模块名称
• 检查DRF接口地址是否正确，如果前后端跨域，要确保后端已经配置了CORS
• 测试时可以打开浏览器控制台，查看网络请求和控制台报错，方便快速排查问题

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