使用缓存数据的角数据导出按钮

Question

我正在运行一个Range13应用程序，该应用程序从表单中查询给定国家和办事处/分支机构雇员的API，然后在表中显示该列表。我使用角数据表，并包括打印和导出按钮的剪贴板，CSV，文本，excel和pdf。

在重复提交表单时，将正确显示更新的员工列表，但只将第一次提交的初始数据导出到各种选项。

<div class="container">
  <div class="row">
    <form class="needs-validation" role="form" (ngSubmit)="onSubmit(branchSearchForm)" #branchSearchForm="ngForm">
      <div class="form-group row pt-3 ps-3">
        <div class="col-lg-6 col-form-label">
          <label for="country-input-box" aria-label="branch">Branch</label>
        </div>
        <div class="col-lg-5">
          <input id="country-input-box" name="country" type="text" class="form-control" ngModel/>
        </div>
      </div>
      <div class="form-group row pt-3 ps-3">
        <div class="col-md-6 col-form-label">
          <label for="branch">Branch</label>
        </div>
        <div class="col-md-5">
          <input id="branch" name="branch" class="form-control" type="text" ngModel/>
        </div>
      </div>
      <div class="form-group row pt-3 ps-3 pb-3">
        <div class="col-md-6 col-form-label">
          <em class="small" translate>requiredField</em>
        </div>
        <div class="col-md-5">
          <div class="d-grid gap-2 d-md-block">
            <button type="submit" class="btn btn-primary">Search</button>
          </div>
        </div>
      </div>
    </form>
  </div>
  <div class="row" *ngIf="branch$ | async as branch">
    <table class="row-border hover table table-striped" *ngIf="branch.employees> 0" [dtOptions]="dataTableOptions" datatable>
      <thead>
        <tr>
          <th translate>ID</th>
          <th translate>First Name</th>
          <th translate>Surname</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let employee of branch.employees">
          <td>{{employee.id}}</td>
          <td>{{employee.firstName}}</td>
          <td>{{employee.surName}}</td>
        </tr>
      </tbody>
    </table>
    <div *ngIf="branch.employees === 0">No employees</div>
  </div>
</div>

Branch {
    id: number;
    country: string;
    employees: Employee[];
}

Employee {
    id: number;
    firstName: string;
    surName: string;
}

@Component({
  selector: 'app-employees',
  templateUrl: './employees.component.html'
}
export EmployeesFormComponent implements OnInit {
  branch$!: Observable<Branch>;

  dataTableOptions: any;

  constructor(private apiService: ApiService) {
    dataTableOptions = {};
  }

  ngOnInit(): void {
    this.dataTableOptions = {
      pagingType: 'full_numbers',
      processing: true,
      columns: [
        { data: 'id' },
        { data: 'firstName' },
        { data: 'surName' }
      ],
      dom: 'Bfrtip',
      buttons: [
        'copy',   // Copy table to clipboard
        'print',  // Print table
        'csv',    // Export to CSV
        'excel',  // Export to Excel
        'pdf'     // Export to PDF
      ]
    };
  }

  onSubmit(branchSearchForm: any): void {
    const country: string = matchSearchForm.form.controls.country.value;
    const branch: string = matchSearchForm.form.controls.value;
    this.apiService.getBranchDetails(country, branch)
                   .subscribe((branch: Branch) => {
                                this.branch$ = of(branch);
                              });
  }
}

@Injectable({
  providedIn: 'root',
})
export class ApiService {

  constructor(private http: HttpClient) { }

  getBranchDetails(country: string, branch: string): Observable<Branch> {
    const url: string = `api/${country}/${branch}/details`;
    return this.http.get<Branch>(url);
  }
}

我需要改变什么才能解决这个问题？

Answer 1

I不应该使用of()调用进行订阅()。这就是您的分支可观察到的用途:直接使用服务方法的结果。然后创建一个子组件，并将分支$注入管道异步。

我建议您创建一个可以广播数据的主题服务。

否则，由于您使用了订阅()方法，您只需去掉可观察的和管道异步。

在这里解释：https://dev.to/juliandierkes/two-ways-of-using-angular-services-with-the-httpclient-51ef