角度过滤器问题-类型

Question

我有一个以Laravel为端点的Angular 7应用程序。在其中，我创建了一个过滤器。当我在本地系统上工作时，它可以完美运行。当我尝试运行时会发生此问题：

  

ng build --prod

它会产生此错误：

  

src \ app \ components \ bulk-sms-outbox.component.html（77,24）：：'BulkSmsOutboxComponent'类型的属性'filter'不存在。

service.ts

import { Injectable } from '@angular/core';
import { Observable, of, throwError } from 'rxjs';
import { HttpClient, HttpHeaders, HttpErrorResponse } from 
'@angular/common/http';
import { catchError, tap, map } from 'rxjs/operators';
import { Smsmt } from '../models/smsmt';

const httpOptions = {
  headers: new HttpHeaders({'Content-Type': 'application/json'})
};
const apiUrl = "http://localhost/backend/public/api/smsmts";

@Injectable({
  providedIn: 'root'
})

export class SmsmtService {
  constructor(private http: HttpClient) { }
  getSmsmts (): Observable<Smsmt[]> {
return this.http.get<Smsmt[]>(apiUrl)
  .pipe(
    tap(smsmts => console.log('Fetch smsmts')),
    catchError(this.handleError('getSmsmts', []))
  );
  }

model.ts

export class Smsmt {
msisdn: string;
message: string;
telco: string;
error_message: string;
error_code: string;
package_id: string;
 }

bulk-sms-outbox.component.ts

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

import { SmsmtService } from '../../../services/smsmt.service';
import { TokenService } from '../../../services/token.service';
import { Router } from '@angular/router';
import { Smsmt } from '../../../models/smsmt';

@Component({
  selector: 'app-bulk-sms-outbox',
  templateUrl: './bulk-sms-outbox.component.html',
  styleUrls: ['./bulk-sms-outbox.component.scss']
})

export class BulkSmsOutboxComponent implements OnInit {

  displayedColumns: string[] = ['msisdn', 'message', 
'telco','error_message','error_code', 'package_id'];
  data: Smsmt[] = [];
  isLoadingResults = true;    

  constructor(private api: SmsmtService) { }

  ngOnInit() {
    this.api.getSmsmts()
      .subscribe(res => {
    this.data = res;
    console.log(this.data);
    this.isLoadingResults = false;
      }, err => {
    console.log(err);
    this.isLoadingResults = false;
  });

  }

  ngOnDestroy(): void {
document.body.className = '';
  }

  //sorting
  key: string = 'msisdn';
  reverse: boolean = false;
  sort(key){
   this.key = key;
this.reverse = !this.reverse;
 }
 p: number = 1;    

}

bulk-sms-outbox.component.html

<div class="wrapper">
  <app-navbartop></app-navbartop>
  <app-navbaraside></app-navbaraside>
  <div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <section class="content-header">

    <ol class="breadcrumb">
      <li>
        <a href="#">
          <i class="fa fa-dashboard"></i> Home</a>
      </li>
      <li class="active">Dashboard</li>
    </ol>
  </section>
  
  <!-- Main content -->
  <section class="content">

    <div class="row">
      <div class="col-xs-12">
        <h1>SMS - Outbox</h1>
        <p>This is a log of your bulk sms outbox.</p>


        <!-- /.box -->
      </div>
      <!-- /.col -->
    </div>      

      <div class="row">
          <div class="col-xs-12">
            
            <div class="col-lg-12 col-sm-12 col-xs-12 no-padding" style="padding-top: 20px !important;">
          
            <div class="col-xs-4">
                <a href="#" class="btn btn-block btn-primary" style="margin-right: 15px;"><i class="fa fa-search"></i> Filter Messages</a>
              </div>
            <div class="col-xs-4">
                <a href="#" class="btn btn-block btn-primary" style="margin-right: 15px;"><i class="fa fa-download"></i> Download CSV</a>
            </div>    
            <div class="col-xs-4">           
                  <a href="#" class="btn btn-block btn-primary" style="margin-right: 15px;"><i class="fa fa-refresh"></i> Refresh</a>
            </div>
            </div>
          </div>    
      </div>
<br>        

    <div class="row">
      <div class="col-xs-12">
        <div class="box">
        <!--
        <div class="box-header">
          <h3 class="box-title"></h3>
        </div>
        -->
          <!-- /.box-header -->
          <div class="box-body">
            <table id="example2" class="table table-bordered table-hover table-striped table-condesed">
              <thead>
              <tr>
                  <th width="5%">#</th>
                  <th>MSISDN</th>
                  <th>Message</th>
                  <th>Telco</th>
                  <th>Error Message</th>
                  <th>Error Code</th>
                  <th>Package</th>
                <!-- <th>Status</th>                     -->
              </tr>
              </thead>
              <tbody>

                      <tr  *ngFor="let datas of data| filter:filter | paginate: { itemsPerPage: 5, currentPage: p }; let i = index">
                      <td>{{i + 1}}</td>
                    <td>{{datas.msisdn}}</td>
                    <td>{{datas.message}}</td>
                    <td>{{datas.telco}}</td>
                    <td>{{datas.error_message}}</td>
                    <td>{{datas.error_code}}</td>
                    <td>{{datas.package_id}}</td>

              </tr>
            </table>
            <pagination-controls (pageChange)="p = $event"></pagination-controls>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->


        <!-- /.box -->
      </div>
      <!-- /.col -->
    </div>    

  </section>
</div> 

  <app-navbarfooter></app-navbarfooter>
</div>