dtTrigger 不适用于 Angular 数据表

Question

Angular Datatable 工作正常，但是当我在表组件上包含

[dtTrigger]="dtTrigger"

时，Datatable 将从表中删除。

从表中删除

[dtTrigger]="dtTrigger"

后，它按预期工作。

动态更新数据需要

[dtTrigger]="dtTrigger"

。

ts文件如下，

import { Component, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgForm } from '@angular/forms';
import { User } from '../user';
import { UserService } from '../user.service';
import { CommonModule } from '@angular/common';
import {RouterModule} from '@angular/router';
import { DataTablesModule } from 'angular-datatables';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-user',
  standalone: true,
  imports: [FormsModule,CommonModule, RouterModule, DataTablesModule],
  templateUrl: './user.component.html',
  styleUrl: './user.component.css'
})

export class UserComponent {
  userService: UserService = inject(UserService);
  formData = new FormData;
  users: User[] = [];
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject<any>();
  constructor(){
    this.userService.getUsers().subscribe(users=>{
      this.users = users;
    });
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
      processing: true,
      };
  }
  async submit(f: NgForm) {
    var user: User = { name: f.value.name, email: f.value.email }
    await this.userService.upload(this.formData).subscribe(data => {
      user.photo = data.photo;
      this.userService.addLocation(user).subscribe()
      this.userService.getUsers().subscribe(users=>{
        this.users = users;
        f.resetForm()
      });
    });
  }
  upload(event: Event) {
    let element = (event.target as HTMLInputElement);
    let files = (element.files as FileList);
    this.formData.set('photo', files[0])
  }
}

模板中的 html 是，

<form #f="ngForm" (submit)="submit(f)">
    <label for="name">Name:</label>
    <input id="name" type="text" name="name" ngModel><br><br>

    <label for="email">Email:</label>
    <input id="email" type="text" name="email" ngModel><br><br>

    <label for="photo">Photo:</label>
    <input id="photo" type="file" name="photo" (change)="upload($event)"><br><br>
    <button type="submit" class="primary">Add</button>
</form>
<table *ngIf = "users.length" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Photo</th>
            <th>Details</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let user of users">
            <td>
                {{user.name}}
            </td>
            <td>
                {{user.email}}
            </td>
            <td>
                <img height="100px" src="http://localhost:3000/{{user.photo}}">
            </td>
            <td>
                <a [routerLink]="['/details', user.id]">View</a>
            </td>
        </tr>
    </tbody>
</table>

Angular CLI 版本为 17， 节点版本为20， NPM版本是10

Answer 1

在构造函数中获取用户列表之前尝试定义

dtOptions

：

this.userService.getUsers().subscribe(users=>{
  this.users = users;
});
this.dtOptions = {
  pagingType: 'full_numbers',
  pageLength: 5,
  processing: true,
};