通过Variable与Getter将数据传递到组件之间的区别

问题描述

我面临通过@Input（）装饰器将数据传递到子组件的问题。

ChildComponent.ts：

export class ViolationListComponent implements OnInit {
    @input() violations: string[];
    public displayedColumns: string[] = ['ViolationIndicator','Rule'];

  constructor() { }

  ngOnInit() {
  }
}

ChildComponent.html：

<div class="d-flex" *ngFor="let ruleViolation of violations">
    <mat-icon matTooltip="Hello">test</mat-icon>
</div>

当通过变量从父级传递violations时，一旦将鼠标悬停在元素上，就会显示matTooltip：

ParentComponent.html：

<app-violation-list [violations]="violations"><app-violation-list>

ParentComponent.ts：

export class ParentComponent implements OnInit {
    public violations = [
      "Violation in Rule 1 occred","Violation in Rule 2 occred"
    ];

但是当通过吸气剂从父级传递violations时，不会显示matTooltip：

ParentComponent.html：

<app-violation-list [violations]="RuleViolations"><app-violation-list>

ParentComponent.ts：

export class ParentComponent implements OnInit {

  public get RuleViolations(): string[] {
  return [
      "Violation in Rule 1 occred","Violation in Rule 2 occred"
    ];
}

通过getter传递的数据在子组件中可用，我可以访问单个值。我认为通过引用通过吸气剂传递数据与通过变量传递数据基本相同，但显然不同。这里会发生什么，为什么第一种情况起作用而第二种情况不起作用？

先谢谢了。最好的问候

解决方法

我认为您忘记了RuleViolations旁边的括号，请尝试：

<app-violation-list [violations]="RuleViolations()"><app-violation-list>

angular angular property-binding