Angular2-QueryBuilder ZoneAwarePromise

Question

我对angular 2查询生成器的角度有问题。

这是我的querybuilder.Components.ts文件

import { Component, OnInit } from '@angular/core';
import { QueryBuilderConfig } from "angular2-query-builder";
import { QueryBuilderModule } from "angular2-query-builder";
import { AuthService } from '../../services/auth.service';
import { Router } from '@angular/router';
import { FlashMessagesService } from 'angular2-flash-messages';
@Component({
  selector: 'query-builder',
  templateUrl: './querybuilder.component.html',
  styleUrls: ['./querybuilder.component.css']
})
export class QuerybuilderComponent implements OnInit {
  user: any;
  isDev: boolean;
  authToken: any;
  query = {
    condition: 'and',
    rules: [
      { field: 'age', operator: '<=', value: 'Bob' },
      { field: 'gender', operator: '>=', value: 'm' }
    ]
  };

  config: QueryBuilderConfig = {
    fields: {
      age: { name: 'Age', type: 'number' },
      gender: {
        name: 'Gender',
        type: 'category',
        options: [
          { name: 'Male', value: 'm' },
          { name: 'Female', value: 'f' }
        ]
      }
    }
  }
  constructor(
    private authService: AuthService,
    private router: Router,
    private flashMessage: FlashMessagesService
  ) { }

  ngOnInit() { }
}

在这里我的querybuilder.component.html

<query-builder [(ngModel)]="query" config="config"></query-builder>

如果我想试一试，我会得到一个ZoneAwarePromise

下面是原始错误消息：

RangeError: Maximum call stack size exceeded at callWithDebugContext 
(http://localhost:8080/vendor.bundle.js:54717:13) at 
Object.debugCreateComponentView [as createComponentView] 
(http://localhost:8080/vendor.bundle.js:54054:12) at createViewNodes 
(http://localhost:8080/vendor.bundle.js:53400:46) at callViewAction 
(http://localhost:8080/vendor.bundle.js:53865:13) at execComponentViewsAction 
(http://localhost:8080/vendor.bundle.js:53774:13) at createViewNodes 
(http://localhost:8080/vendor.bundle.js:53463:5) at callViewAction 
(http://localhost:8080/vendor.bundle.js:53865:13) at execComponentViewsAction    
(http://localhost:8080/vendor.bundle.js:53774:13) at createViewNodes 
(http://localhost:8080/vendor.bundle.js:53463:5) at callViewAction 
(http://localhost:8080/vendor.bundle.js:53865:13) at execComponentViewsAction 
(http://localhost:8080/vendor.bundle.js:53774:13) at createViewNodes 
(http://localhost:8080/vendor.bundle.js:53463:5) at callViewAction 
(http://localhost:8080/vendor.bundle.js:53865:13) at execComponentViewsAction 
(http://localhost:8080/vendor.bundle.js:53774:13) at createViewNodes 
(http://localhost:8080/vendor.bundle.js:53463:5)

我做错什么了？谢谢祝你周末愉快。

Answer 1

我找到了解决办法。我没有在index.html和app.module.ts部件中添加js。

https://www.npmjs.com/package/angular2-query-builder

https://plnkr.co/edit/fgw8tfnOJ1cI48nr3MUl?p=preview