1

我正在使用一个 npm 插件NgPipesModule（来自 package.json: "ng-pipes": "^0.1.2",）。在 App.Module 中，所有内容都已正确导入和注入。

我有以下组件：

/* Logic */
import { Room } from "../../../models/room.model";
import { Message } from "../../../models/message.model";
import { Log } from "../../../models/log.model";
import { RoomService } from '../../../services/room.service';
import { MessageService } from '../../../services/message.service';
import { LoggingService } from '../../../services/logging.service';

/* Engines */
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FilterByPipe } from 'ng-pipes';

@Component({
  selector: 'app-list-room',
  templateUrl: './list-room.component.html',
  styleUrls: ['./list-room.component.css'],
  providers: [FilterByPipe]
})
export class ListRoomComponent implements OnInit {

  items: Room[];
  searchText: String = new String();

  constructor(private roomService: RoomService, private router: Router, private filterBy: FilterByPipe, private messageService: MessageService) {}

  ngOnInit() {
    this.roomService.getAllRooms().subscribe( i => {
      this.messageService.changeLoading(false);
      this.items = i;
    })
  }

}

这是 HTML 模板：

<form class="row">

        <input class="form-control" type="text" [(ngModel)]="searchText" placeholder="Type room name" name="searchText">

</form>


<br>

<table class="table table-sm table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>Price</th>
            <th>Decription</th>
            <th>Added at:</th>
        </tr>
    </thead>
    <data-loading></data-loading>
    <tbody>
        <tr *ngFor="let item of items | filterBy : ['name'] : searchText">
            <td><a [routerLink]="['/hotel/room', item.id ]"> {{item.name}} </a></td>
            <td>{{item.price}}</td>
            <td>{{item.decription}}</td>
            <td>{{item.createdAt | date: 'shortDate' }}</td>
        </tr>
    </tbody> 
</table>

当我打开一个组件时，我有一个包含预期数据的表，并且一个过滤器实际上可以工作，这意味着如果我在上面的表单中打印一个关键字，表会根据我的查询而变化。

问题就在这里。在控制台日志中，我有以下错误。之后我无法再次使用应用程序。有人可以解释一下，这里有什么问题吗？

vendor.bundle.js:3257 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
10main.bundle.js:317 false
core.es5.js:1084 ERROR Error: Uncaught (in promise): TypeError: Cannot convert undefined or null to object
TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at toArray (ng-pipes.umd.js:27)
    at FilterByPipe.exports.FilterByPipe.FilterByPipe.transform (ng-pipes.umd.js:662)
    at checkAndUpdatePureExpressionInline (core.es5.js:11353)
    at checkAndUpdateNodeInline (core.es5.js:12244)
    at checkAndUpdateNode (core.es5.js:12177)
    at debugCheckAndUpdateNode (core.es5.js:12880)
    at debugCheckDirectivesFn (core.es5.js:12821)
    at Object.eval [as updateDirectives] (ListRoomComponent.html:22)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12806)
    at Function.keys (<anonymous>)
    at toArray (ng-pipes.umd.js:27)
    at FilterByPipe.exports.FilterByPipe.FilterByPipe.transform (ng-pipes.umd.js:662)
    at checkAndUpdatePureExpressionInline (core.es5.js:11353)
    at checkAndUpdateNodeInline (core.es5.js:12244)
    at checkAndUpdateNode (core.es5.js:12177)
    at debugCheckAndUpdateNode (core.es5.js:12880)
    at debugCheckDirectivesFn (core.es5.js:12821)
    at Object.eval [as updateDirectives] (ListRoomComponent.html:22)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12806)
    at resolvePromise (zone.js:769)
    at resolvePromise (zone.js:740)
    at zone.js:817
    at ZoneDelegate.invokeTask (zone.js:424)
    at Object.onInvokeTask (core.es5.js:4140)
    at ZoneDelegate.invokeTask (zone.js:423)
    at Zone.runTask (zone.js:191)
    at drainMicroTaskQueue (zone.js:584)
    at HTMLAnchorElement.ZoneTask.invoke (zone.js:490)

这是来自 html 的第 22 行

 <tr *ngFor="let item of items | filterBy : ['name'] : searchText">
4

0 回答 0