Question

在DateRangeComponent中，我尝试使用ViewerComponent和EventEmitter装饰器在单击按钮时将数组发射到另一个（Output）组件。

getData()中有一个DateRangeComponent方法，其中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>

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

Stackblitz

Answer 1

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

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

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

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

而不是将名称标为@Input() names: any;

简单地将其声明为

names : Array<{}>;

分叉的stackblitz

Answer 2

几件事。

您的appComponent必须类似于：

//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组件中，不要放置* ng如果是app-table标签，我选择放置在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);
        }
      )
  }

角度无法发射数组

2 个答案: