angular - Angular - 错误错误:找不到“object”类型的不同支持对象“[object Object]”
问题描述
我正在使用 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', []))
);
}
短信收件箱.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);
}
}
短信收件箱组件.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 仅支持绑定到 Iterables,例如 Arrays。
当我安慰它时,我有这个错误。有关详细信息,请参见图表。
这是 它在 component.html 中指向的第59行
<input class="form-control" type="text" name="search" [(ngModel)]="filter" placeholder="Search ...">
我相信错误来自分页
问题是,为什么我会出现此错误以及如何解决它。
解决方案
推荐阅读
- google-apps-script - 是否可以从 Apps Script 发送动态电子邮件?
- php - Laravel Eloquent,排序 whereHas / width 数据
- jquery - document.ready 中的 onload 函数可以写成
- c# - 通过 .Net 访问 Microsoft 团队时未将对象引用设置为对象
- php - 在 if else 语句中执行 while 循环
- symfony - 如何在 var/cache/prod 上保留 777 (Symfony 5)
- html - 如何删除输入html的firefox默认下拉菜单
- ios - iOS 在存储千兆字节数据时是否限制渐进式 Web 应用程序
- java - MariaDB 和 flyway 语法错误,但在 JAVA 中没有
- javascript - 当页面以角度加载时如何显示弹出窗口?