如何在 Django 后端使用 Angular 数据表

Question

我正在尝试将 Datables 与 Django 一起使用，但我不知道如何以正确的形式获取数据。 Django 的 rest API 正在返回一个对象，但 Angular Datatables 需要一个 JSON 文件，那么我该如何实现这个结果？

这是我尝试过的：

HTML：

<table datatable class="row-border hover">
            <thead>
                <tr class="header">
                    <th class="date">Id</th>
                    <th class="date">Nom</th>
                    <th class="societe">Email</th>
                    <th class="evenements">Date d'inscription</th>
                    <th class="facturePDF">Actif</th>
                </tr>
            </thead>
            <tbody *ngIf="persons?.length != 0">
                <tr *ngFor="let item of Users;let index=index">
                    <td class="text-monospace pt-3 pl-4">
                        {{item?.id}}
                    </td>
                    <td class="text-monospace pt-3 pl-4">
                        {{item?.name}} {{item?.lastname}}
                    </td>
                    <td class="text-monospace pt-3 pl-4">
                        {{item?.email}}
                    </td>
                    <td class="text-monospace pt-3 pl-4">
                        {{item?.date_joined.slice(0,10)}}
                    </td>
                    <td class="text-monospace pt-3 pl-4">
                        {{item?.is_active}}
                    </td>
                    
                </tr>
            </tbody>
            <tbody *ngIf="Users?.length == 0">
                <tr>
                <td colspan="3" class="no-data-available">No data!</td>
                </tr>
            <tbody>
        </table>

admin.component.ts：

ngOnInit() {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 2
    };
    this.GetUsers();
  }

GetUsers(){
    this.ApiService.list_users(this.page).subscribe(
      data => {
        this.Users = this.Users.concat(data);
      },
      error=>{
        console.log(error);
      }
    )
  }

“list_users”函数调用 Django 从数据库中检索数据：

@api_view(['GET','POST','DELETE'])  
def list_annonces(request):
    if request.method == 'GET':
        annonces = Annonces.objects.all().order_by('-id')
        count = Annonces.objects.count()
        try:
            page = int(request.GET.get('page'))
        except Exception:
            page = 1
        limit = count
        offset = (page-1) * 10
        annonces_data = AnnonceSerialize(annonces.all()[offset:limit], many=True)
        return Response(annonces_data.data, status.HTTP_200_OK)
```

Answer 1

你可能想JSON.stringify(<object_from_django>)。

Answer 2

好的，如果有人遇到同样的问题，我是这样解决的：

在您的组件文件中添加以下代码：

class Person {
  id: number;
  firstName: string;
  lastName: string;
}

export class AdminComponent implements OnInit {
  dtOptions: DataTables.Settings = {};
  persons: Person[];
  private dtTrigger: Subject<Users> = new Subject();

 constructor(private activatedRoute: ActivatedRoute, private ApiService : ApiService,
    private Authservice: AuthService, private approuter: Router, private MatDialog : MatDialog,
    private config: ConfigService, private http: HttpClient) {}

ngOnInit(): void {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 10
    };
    this.http.get<any>(this.Authservice.getApiUrl() + 'users/list/?page=1')
      .subscribe(persons => {
        this.persons = persons;
        console.log("Persons == ", this.persons);
        // Calling the DT trigger to manually render the table
        this.dtTrigger.next();
      });
  }

  ngOnDestroy(): void {
    // Do not forget to unsubscribe the event
    this.dtTrigger.unsubscribe();
  }

}

对于模板文件，我需要遍历新的 Person 对象而不是 User 数组：

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
            <thead>
                <tr class="header">
                    <th class="date">Id</th>
                    <th class="date">Nom</th>
                    <th class="societe">Email</th>
                    <th class="evenements">Date d'inscription</th>
                    <th class="facturePDF">Actif</th>
                </tr>
            </thead>
            <tbody *ngIf="persons?.length != 0">
                <tr *ngFor="let item of persons;let index=index">
                    <td class="text-monospace pt-3 pl-4">
                        {{item?.id}}
                    </td>
                    <td class="text-monospace pt-3 pl-4">
                        {{item?.name}} {{item?.lastname}}
                    </td>
                    <td class="text-monospace pt-3 pl-4">
                        {{item?.email}}
                    </td>
                    <td class="text-monospace pt-3 pl-4">
                        {{item?.date_joined.slice(0,10)}}
                    </td>
                    <td class="text-monospace pt-3 pl-4">
                        {{item?.is_active}}
                    </td>
                    
                </tr>
            </tbody>
            <tbody *ngIf="persons?.length == 0">
                <tr>
                <td colspan="3" class="no-data-available">No data!</td>
                </tr>
            <tbody>
        </table>