Angular 角度和业力：可以'；t绑定到'；列表'；因为它不是'；t'的已知属性；pq按钮'；

我的应用程序中有一个名为“pq按钮”的组件：

<div class="container mt-5" *ngIf="categoryData">
  <div class="row">
    <div class="col">
      <h5 class="text-center">I am looking for a 
        <pq-button [list]="listCategories" (onSelect)="setCategory($event)" title="{{ category ? category.name : 'Category' }}"></pq-button> that can 
        <pq-button [list]="listCriteria" [disabled]="!category" (onSelect)="setCategory($event)" title="{{ criteria ? criteria.name : 'Criteria' }}"></pq-button> and is good for 
        <pq-button [list]="categoryData.list" [disabled]="!category" (onSelect)="setCategory($event)" title="{{ persona ? persona.name : 'Persona' }}"></pq-button></h5>
    </div>
  </div>  
</div>

所以它是它的一部分。有人知道它失败的其他原因吗

---

根据要求，这是pq按钮组件和pq选择器组件：

观点：

<button class="btn" type="button btn-default" [ngClass]="{ 'btn-active': selected }" [disabled]="disabled" (click)="openSelector = !openSelector">{{ title }}</button>
<pq-selector [items]="items" colour="#e95344" (onSelect)="set($event)" [(visible)]="openSelector"></pq-selector>

{{title}

守则：

import { Component, Input, Output, EventEmitter, OnChanges } from '@angular/core';

@Component({
  selector: 'pq-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss']
})
export class ButtonComponent implements OnChanges {  
  @Input() list: Function;
  @Input() title: string;
  @Input() disabled: boolean;
  @Output() onSelect = new EventEmitter<string>(); 
  items: any[];

  constructor() { }

  ngOnChanges() {
    if (!this.disabled)
        this.list().subscribe(response => this.items = response);
  }

  set($event) {
    this.onSelect.emit($event);
  } 
}

从'@angular/core'导入{Component，Input，Output，EventEmitter，OnChanges}；
@组成部分({
选择器：“pq按钮”，
templateUrl:'./button.component.html'，
样式URL:['./button.component.scss']
})
导出类ButtonComponent在更改{
@Input（）列表：函数；
@输入（）标题：字符串；
@Input（）已禁用：布尔值；
@Output（）onSelect=neweventemitter（）；
项目：任何[]；
构造函数（）{}
ngOnChanges（）{
如果（！this.disabled）
this.list（）.subscribe（response=>this.items=response）；
}
设置（$event）{
this.onSelect.emit（$event）；
} 
}

和选择器html：

<div class="container-fluid selector" [ngStyle]="{'background-color': colour}" [@dialog] *ngIf="visible">
    <div class="row h-100 justify-content-center">
        <div class="col-2 my-auto">
            <ul class="list-unstyled">
                <li *ngFor="let item of items"><a href="#" (click)="select(item)">{{ item.name }}</a></li>
            </ul>
        </div>
    </div>
</div>

<button type="button" class="close" aria-label="Close" (click)="close()">
    <span aria-hidden="true">&times;</span>
</button>

&时代；

和代码：

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

import {
  trigger,
  state,
  style,
  animate,
  transition
} from '@angular/animations';


@Component({
  selector: 'pq-selector',
  templateUrl: './selector.component.html',
  styleUrls: ['./selector.component.scss'],
  animations: [
    trigger('dialog', [
      transition('void => *', [
        style({ transform: 'scale3d(.3, .3, .3)' }),
        animate(100)
      ]),
      transition('* => void', [
        animate(100, style({ transform: 'scale3d(.0, .0, .0)' }))
      ])
    ])
  ]
})
export class SelectorComponent implements OnInit {
  @Input() items: any[];
  @Input() colour: string; 
  @Input() closable = true;
  @Input() visible: boolean;
  @Output() onSelect = new EventEmitter<string>();  
  @Output() visibleChange: EventEmitter<boolean> = new EventEmitter<boolean>();

  private show: boolean;

  constructor() { }

  ngOnInit() {
    this.colour = this.colour || '#000000';
  }

  select(item) {
    this.onSelect.emit(item);
    this.close();
  }

  close() {
    this.visible = false;
    this.visibleChange.emit(this.visible);
  }
}

从'@angular/core'导入{Component，OnInit，Input，Output，EventEmitter}；
进口{
触发
国家,，
风格
使有生气
过渡
}来自“@angular/animations”；
@组成部分({
选择器：“pq选择器”，
templateUrl:'./selector.component.html'，
样式URL:['./selector.component.scss']，
动画：[
触发器（'对话框'[
转换（'void=>*'[
样式（{transform:'scale3d（.3.3.3.3）}），
制作动画（100）
]),
转换（'*=>void'[
动画（100，样式（{transform:'scale3d（.0.0.0.0）}））
])
])
]
})
导出类选择器组件在NIT上实现{
@输入（）项：任意[]；
@输入（）颜色：字符串；
@Input（）closable=true；
@Input（）可见：布尔值；
@Output（）onSelect=neweventemitter（）；
@Output（）visibleChange:EventEmitter=新的EventEmitter（）；
私人秀：布尔；
构造函数（）{}
恩戈尼尼特（）{
this.color=this.color | | |'#000000'；
}
选择（项目）{
此.onSelect.emit（项）；
这个。关闭（）；
}
关闭（）{
可见=假；
this.visibleChange.emit（this.visible）；
}
}

---

我希望这有帮助

在阅读了几个类似的场景后，我认为可能的解决方案是，您需要确保

app.component.spec.ts

具有以下内容：

import { ButtonComponent } from './button/button.component';

...

describe('AppComponent'), () => {

...

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [ 
      ...
    ],
    declarations: [ ButtonComponent ]
  })
  .compileComponents();
}));

...

---

app.component.spec.ts文件对子组件的可见性必须与app.component.ts文件相同。

张贴pq按钮组件的代码。ts@r3plica-你找到解决办法了吗？这似乎是一个常见的问题，通常源于spec.ts没有所需的导入，但我的情况与您的类似，并且仍在寻找令人满意的纠正措施。我可能有一个解决方案，但R3plia需要测试它，以获得答案。pq按钮需要导入到测试部件（包括pq按钮）的规范中。然后应将其添加到测试床配置的声明中。

import { ButtonComponent } from './button/button.component';

...

describe('AppComponent'), () => {

...

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [ 
      ...
    ],
    declarations: [ ButtonComponent ]
  })
  .compileComponents();
}));

...