错误ReferenceError：$未在角度数据表中定义[重复]

Question

我正在尝试将分页和排序添加到我的表中，但出现此错误，但是我遵循此处列出的所有步骤 http://l-lin.github.io/angular-datatables/#/getting-started.

我已经检查了之前的问题，但我没有和我一起工作

我安装了它的所有依赖项

这是组件的代码：-

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ProductService } from '../../service/product-service.service';
import { Subscription, Subject } from 'rxjs';



@Component({
  selector: 'app-admin-products',
  templateUrl: './admin-products.component.html',
  styleUrls: ['./admin-products.component.css']
})
export class AdminProductsComponent implements OnInit, OnDestroy {
  

  products: any[];
  filteredProducts: any[];
  subscribtion: Subscription;
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject();

  constructor(private productService: ProductService) {
    this.subscribtion = productService.getAll().
    // We take a copy of Products and Assigned to filteredProducts
    subscribe(
      products => {
      this.filteredProducts = this.products = products;
      this.dtTrigger.next();
      }
      );
  }

  ngOnInit() {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
      processing: true
    };

  }
  filter(queryStr: string) {
    // console.log(this.filteredProducts);
    if (queryStr) {
      this.filteredProducts = this.products.
      filter(p => p.payload.val().title.toLowerCase().includes(queryStr.toLowerCase()));
    } else {
      this.filteredProducts = this.products;
    }
  }

  ngOnDestroy(): void {
    // to UnSubscribe
    this.subscribtion.unsubscribe();
  }

}

这是 HTML 的代码：-
我也按照这里的所有步骤

<p>
    <a routerLink="/admin/products/new" class="btn btn-primary">New Product</a>
</p>

<p>
   <input type="text"
    #query
    (keyup)="filter(query.value)"
   placeholder="Search ..." class="form-control">
</p>
<table 
datatable [dtOptions]="dtOptions"
[dtTrigger]="dtTrigger" class="table" >
    <thead class="thead-dark">
      <tr>
        <th scope="col">Title</th>
        <th scope="col">Price</th>
        <th scope="col">Edit</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let product of filteredProducts">
       
        <td>{{ product.payload.val().title }}</td>
        <td>{{ product.payload.val().price }}</td>
        <td>
            <a [routerLink]="['/admin/products/', product.key]">Edit</a>
        </td>
      </tr>
    </tbody>
  </table>

Answer 1

$ 未定义主要意味着您不包括 JQuery。

尝试将：添加到您的程序中

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script>

source