角度 无法发射阵列

Question

>DateRangeComponent我尝试使用EventEmitter和装饰器在按钮单击时向另一个(ViewerComponent(组件发出数组Output。

DateRangeComponent中有一个getData()方法，EventEmitter从服务发出数组。

@Output() dataEmitter = new EventEmitter<any[]>();
constructor(private dataService: DataService) { }
getData() {
let fromDate = this.dateName[0];
let toDate = this.dateName[1];
this.dataService.findNameByDate(fromDate, toDate)
.map(names => {
this.names = names;
this.dataEmitter.emit(this.names);
//console.log(JSON.stringify(this.names));
}
)
}

组件应使用装饰器接收发出的数组Input：

@Input() names: any;

HTML 中有一个属性绑定：

<app-table *ngIf="selectedDate" [names]="names"></app-table>

但是接收有问题。怎么了？

斯塔克闪电战

Answer 1

您的发射器工作正常。接收器组件有问题。

您正在将@Input()与@Output()混合.您不需要Input()变量来接收发出的事件，您需要注册Output事件。

将接收组件中的Output事件注册为(dataEmitter)="names = $event"

<app-date-range (dataEmitter)="names = $event"></app-date-range>

而不是将名字作为@Input() names: any;

只需将其声明为

names : Array<{}>;

分叉堆叠闪电战

Answer 2

几件事。

您的应用组件必须如下所示：

//app.html
<!--we use (dataEmiter) to get the changes, and [names] to send the properties -->
<app-date-range (dataEmitter)="emit($event)"></app-date-range>
<app-viewer [names]="names"></app-viewer>
//And the component like
export class AppComponent  {
names:any[]=[];  //<--declare a variable
emit(data:any[])
{
this.names=data;
}
}

在您的 vievewer 组件中，不要放置 *ngIf 如果应用表标签，我选择放入div 并使用 names.length

<div class="container">
<div class="row" *ngIf="names.length">
<app-table [names]="names"></app-table>
</div>
</div>

如果要模拟获取，请更改服务函数 findByDate 像

findNameByDate(fromDate: String, toDate: String) {
return Observable.of(this.data);
}

当然，日期范围函数必须是

getData() {
let fromDate = this.dateName[0];
let toDate = this.dateName[1];
this.dataService.findNameByDate(fromDate, toDate)
.subscribe(names => {  //<---subscribe
this.names = names;
this.dataEmitter.emit(this.names);
console.log(this.names);
}
)
}