Question

我正在使用Angular 7前端和Laravel后端来构建应用程序。我想在页面上进行服务器端分页。

Laravel后端

    public function indexSmsmo()
{
    if(Auth::user()->id == 1)
        $smsmos = Smsmo::paginate(5);
    else 
    $smsmos = Smsmo::where('user_id',Auth::user()->id)->paginate(5);
    return $smsmos;               
}

如上所示，我是从Laravel后端开始的。然后进入Angular

角度：

型号：smsmo.ts

export class Smsmo {
id: number;
msisdn: string;
message: string;
short_code_called: string;
packaged_id: string;
error_message: string;
error_code: string;
telco: string;
user_id: number;

user?: User;
telcoId?: Telco;
package?: Package;

constructor() {}
}

服务：smsmo.service.ts

    import { Smsmo } from '../models/smsmo';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError , tap, map } from 'rxjs/operators';
import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';
import { environment } from 'src/environments/environment.prod';
import { HttpErrorHandler, HandleError } from '../shared/_services/http-handle-error.service';


@Injectable({
  providedIn: 'root'
})

export class SmsmoService {

private readonly apiUrl = environment.apiUrl;
private smsmoUrl = this.apiUrl;
private handleError: HandleError;  

constructor(
  private http: HttpClient,
  httpErrorHandler: HttpErrorHandler ) {
    this.handleError = httpErrorHandler.createHandleError('SmsmoService');
  }

 /** GET smsmos from smsmos endpoint */
 getSmsmos (): Observable<Smsmo[]> {
  return this.http.get<Smsmo[]>(this.smsmoUrl + '/indexSmsmo')
  .pipe(
    tap(smsmos => console.log('Fetch smsmos')),
    catchError(this.handleError('getSmsmts', []))
  );
 }

sms-inbox.component.ts

import { Component, OnInit } from '@angular/core';
import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';
import { NotificationService } from '../../../services/notification.service';

import { SmsmoService } from '../../../services/smsmo.service';
import { Router } from '@angular/router';
import { Smsmo } from '../../../models/smsmo';
import { filter } from 'rxjs/operators';


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

export class SmsInboxComponent implements OnInit {

  smsmos: Smsmo[];
  isLoading: Boolean = false;
  public searchText: string; 
  public filter: string;  

  p: number = 1;
  totalRecords = 0;
  pageSize = 5;

  constructor(
    private excelService:ExcelService,
     private smsmoService: SmsmoService,
     private spinnerService: Ng4LoadingSpinnerService,) { }

  ngOnInit() {

    // Get Bulk SMS Inbox detail
    this.getSmsmos();    
  }

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

  refresh(): void {
    window.location.reload();
}

  //sorting
  key: string = 'msisdn';
  reverse: boolean = false;
  sort(key){
    this.key = key;
    this.reverse = !this.reverse;
  }
    getSmsmos(): void {
    this.spinnerService.show();
    this.smsmoService.getSmsmos()
      .subscribe(
    response => this.handleResponse(response),
    error => this.handleError(error),
    ()=>this.spinnerService.hide()
    );
  }

  protected handleResponse(response: Smsmo[]) {
   this.spinnerService.hide(),
   this.smsmos = response;
  }
  protected handleError(error: any) {
   ()=>this.spinnerService.hide()
   console.error(error);
  } 
}

sms-inbox-component.html

    <div class="row">
      <div class="col-xs-12">
        <div class="box">
            <div class="box-header">
                <div class="input-group">
                    <input class="form-control" type="text" name="search" [(ngModel)]="filter" placeholder="Search ...">   
                    <span class="input-group-addon">
                        <span class="fa fa-search"></span>
                       </span>
                </div> 
            </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>Short Code</th>
                <th>Package</th>
                <th>Error Message</th>
                <th>Error Code</th>
              </tr>
              </thead>
              <tbody>
                <tr  *ngFor="let smsmo of smsmos| filter:filter | paginate: { itemsPerPage: 5, currentPage: p }; let i = index">
                      <td>{{i + 1}}</td>
                    <td>{{smsmo.msisdn}}</td>
                    <td>{{smsmo.short_code_called}}</td>
                    <td>{{smsmo?.package_id}}</td>
                    <td>{{smsmo.error_message}}</td>
                    <td>{{smsmo.error_code}}</td>
              </tr>
            </table>
            <div class="pull-right col-md-7">
                <div class="text-right">             
            <pagination-controls 
                (pageChange)="p = $event"
                directionLinks = "true"
                >
            </pagination-controls>
          </div>
        </div>             
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->


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

我收到此错误

错误错误：找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到数组等Iterable。

当我进行控制台操作时，出现此错误。有关详细信息，请参见该图。

这是它在component.html

中指向的行 59

<input class="form-control" type="text" name="search" [(ngModel)]="filter" placeholder="Search ...">

我认为错误是由于分页

问题是，为什么会出现此错误以及如何解决该错误。

Answer 1

您遇到该错误，因为变量smsmos不是数组，该数组不可迭代，因此无法在此处使用ngFor。

因此请检查返回类型是否来自BE是否为正确的数组类型

角度-错误错误：找不到类型为“对象”的其他支持对象“ [对象对象]”

1 个答案: