将数据提取到 angular 11 中的 ng-bootstrap 表

Question

嗨，这里的每个人我都面临将数据提取到数组的问题，但是当我将数据放入数组时，编辑器说未定义数组

错误信息：编译失败。

src/app/customers/customers-list/customers-list.component.ts:111:14 - 错误 TS2551：“CustomersListComponent”类型上不存在“CUSTOMERS”属性。 您指的是“客户$”吗？

111 this.CUSTOMERS = 帖子； ~~~~~~~~~

src/app/customers/customers-list/customers-list.component.ts:64:3 64 个客户$: Observable<Customer[]>; ~~~~~~~~~~ 'customers$' 在这里声明。

这是代码

import {
  Component,
  OnInit,
  PipeTransform, // table
} from '@angular/core';

import { DecimalPipe } from '@angular/common'; // table
import { FormControl } from '@angular/forms'; // table

import { Observable } from 'rxjs'; // table
import { map, startWith } from 'rxjs/operators'; // table
import {NgbModal} from '@ng-bootstrap/ng-bootstrap'; // modal
import {AddCustomerComponent} from '../add-customer/add-customer.component'; // modal


import { faFolderPlus, faPencilAlt, faTrashAlt } from '@fortawesome/free-solid-svg-icons'; // fontawsome icons
import {HttpClient} from '@angular/common/http';

// table
interface Customer {
  id: number;
  name: string;
  company: string;
  remaining: number;
  email: string;
  mobile: number;
  whats_up: number;

}

let CUSTOMERS: Customer[] = [
  {
    id: 12,
    name: 'jack',
    company: 'SDTE',
    remaining: 580,
    email: 'test@test.com',
    mobile: +456456456456,
    whats_up: +456456456
  }
];

function search(text: string, pipe: PipeTransform): Customer[] {
  return CUSTOMERS.filter(customer => {
    const term = text.toLowerCase();
    return customer.name.toLowerCase().includes(term)
      || customer.company.toLowerCase().includes(term)
      || pipe.transform(customer.remaining).includes(term)
      || customer.email.toLowerCase().includes(term)
      || pipe.transform(customer.mobile).includes(term)
      || pipe.transform(customer.whats_up).includes(term);
  });
}

@Component({
  selector: 'app-customers-list',
  templateUrl: './customers-list.component.html',
  styleUrls: ['./customers-list.component.css'],
  providers: [DecimalPipe] // table
})
export class CustomersListComponent implements OnInit {

  // table
  customers$: Observable<Customer[]>;
  filter = new FormControl('');

  faFolderPlus = faFolderPlus;
  faPencilAlt = faPencilAlt;
  faTrashAlt = faTrashAlt;



  constructor(
    pipe: DecimalPipe, // table
    private modalService: NgbModal, // modal
    private http: HttpClient // Get All Data
) {
    // table
    this.customers$ = this.filter.valueChanges.pipe(
      startWith(''),
      map(text => search(text, pipe))
    );
  }

  ngOnInit(): void {
    this.getAllData();
  }

  // modal
  openPopupModal() {
    const modalRef = this.modalService.open(AddCustomerComponent,{ centered: true, size: 'lg' });
    modalRef.componentInstance.name = 'World';
  }

  private getAllData() {
  this.http
    .get('http://localhost:3000/customers')
    .subscribe(
      posts => {
        console.log('GET all Data works');
        this.CUSTOMERS = posts;    // <<<<< Here is the problem ************ How can I to Fix it.

      });
  }
}

我

Answer 1

this.CUSTOMERS = posts; 这是指当前 class CustomersListComponent但您的变量在 class 之外，因此您需要直接分配CUSTOMERS = posts; :)

Answer 2

您需要指定返回类型。

你可以尝试使用这个：

 private getAllData() {
  this.http
    .get<Customer[]>('http://localhost:3000/customers') // <<<<< Try using this. 
    .subscribe(
      posts => {
        console.log('GET all Data works');
        CUSTOMERS = posts;
      });
  }