Question

我在Angular中有一个组件，该组件的输入为数字，因为它根据列表中的偶数还是奇数呈现的方式有所不同。

<app-comp [number]=getNumberAndIncrement()></app-comp>

其中

count = 0;

getNumberAndIncrement() {
  return count++;
}

问题出在变更检测上。显然，该函数每次调用都会返回不同的值。但是我只想将一个值传递给组件，然后忽略它，但是Angular似乎更喜欢该函数，因为输入没有副作用。该功能的好处是，我可以更改组件的顺序，而不必担心重新编写硬编码的数字。

Answer 1

您可以使用私有成员和setter执行函数并运行一些检查，因此即使来自父级的输入，私有成员“ _number”也将仅被实例化一次（如果在此示例中未设置）。改变

export class YourComponent implements OnInit {

    private _number: number;

    @Input() set number(parentNumber) {
      if (!this._number) {
        this._number = parentNumber;
      }
    }

  constructor() { }

  ngOnInit() {
  }

}

Answer 2

据我了解，您需要通过列表呈现的组件索引吗？

如果需要唯一索引，请使用*ngFor指令的可能性。

*ngFor的可能性：

index: number：当前项目在可迭代对象中的索引。
first: boolean：如果该项是可迭代项中的第一项，则为true。
last: boolean：当该项是迭代器中的最后一项时为true。
even: boolean：当该项在可迭代项中具有偶数索引时为true。
odd: boolean：当该项在可迭代项中具有奇数索引时为true。

1）如何在index中定义*ngFor：

这是定义索引的示例。

<app-comp *ngFor="let item of myArray; let myIndex = index; [number]="myIndex"></app-comp>

2）如何获取even中的odd和*ngFor信息：

为even和odd声明自己的变量。

<app-comp *ngFor="let item of myArray; let myIndex = index; let myEven = even; let myOdd = odd; [number]="myIndex"></app-comp>

Here是上述可能性的可行示例。

官方角度文档here中的更多描述：

角度-输入为函数，可返回顺序值

2 个答案: