Javascript TypeError:无法读取属性'；设定日期'；未定义的

在一个点击事件中，我试图以角度将数据从一个组件传递到另一个组件，我的组件如下所示

父组件

@Component({
  selector: 'app-reporting-filter',
  templateUrl: './reporting-filter.component.html',
  styleUrls: ['./reporting-filter.component.scss'],
  providers: [ProjectShipmentService]
})

export class ReportingFilterComponent implements DoCheck {

  @ViewChild(TjlShipdateFilterComponent, {static: false})
  private tjl: TjlShipdateFilterComponent;

  finalResult: ShipDateFilterModel[];

  click() {
    this.elem = this.getResultOnFilter(this.firstSelection, this.secondSelection);
      this.tjl.settDate(this.finalResult);
  }
   ........}

子组件类似于

Component({
  selector: 'app-tjl-shipdate-filter',
  providers: [ProjectShipmentService],
  templateUrl: './tjl-shipdate-filter.component.html',
  styleUrls: ['./tjl-shipdate-filter.component.scss']
})
export class TjlShipdateFilterComponent implements DoCheck {
 tljShipDate: ShipDateFilterModel[];
  @Input() settDate(e: ShipDateFilterModel[]) {
    this.tljShipDate = e;
  }
......}

reporting-filter.component.html

      <dxi-item  [ratio]="1">
              <dx-button (onClick)="click()" style="padding: 1vw 3vw 1.5vw 3vw; text-align: center; font-weight: bold;">Filter</dx-button>
      </dxi-item>

滤器

但是当点击按钮并输入'this.tjl.settDate（this.finalResult）；'在父组件中执行。我得到：

TypeError:无法读取未定义的属性“settDate”

不确定我们是否遗漏了什么

---

您可以传递数据并绑定到输入设置器，而不是对子组件调用方法。为此，您需要在

set

和

Data

之间添加一个空格

 @Input() set Data(e: ShipDateFilterModel[]) {
    this.tljShipDate = e;
  }

然后，在父组件中，您需要创建一个可以向下传递的变量，例如

@Component({
  selector: 'app-reporting-filter',
  template: ` 
              <button (click)="click()">Click Me</button>
              <app-tjl-shipdate-filter [data]="tjlData" ></app-tjl-shipdate-filter>
  `,
  providers: [ProjectShipmentService]
})

export class ReportingFilterComponent {
  @ViewChild(TjlShipdateFilterComponent, {static: false})
  private tjl: TjlShipdateFilterComponent;
  private tjlData: any
  click() {
    this.tjlData = 'example data to pass'
  }
}

@组成部分({
选择器：“应用程序报告筛选器”，
模板：`
点击我
setData或setDate？？SettDate-？@Chellappan@Input（）这正是我在上面看到的code@AbderrahimSoubaiElidrissi那是个打字错误，我更新了it@Rob这是一个输入错误，我更新了它stackblitz解决方案不起作用。当我单击此处时，没有显示任何内容没有显示任何内容，因为您没有指定要对传递的数据执行的任何操作，也没有指定要使用的附加函数，也没有相关的组件模板（这很好，这里的挑战是让数据在组件之间正确移动）。因此，如果您对答案满意，您可以将其标记为正确，如果不满意，您可以尝试重新指定原始问题或创建新帖子，或在此处询问更多问题。