角度6-使用组件属性作为相同的组件属性值

Question

I have a component that is passing props down to a child component. I would like to take the resulting value of [info] and use it as my condition for [value]

Basically, is the [info] prop equal to the String good-info ? If yes, set value to Happy otherwise set it to Sad

<some-component [info]="row.calculation.anotherCalculation.information"
                [value]="info === 'good-info' ? 'Happy' : 'Sad' "
></some-component >

Of course I could use the same calculation for value that I'm using for info but that seems redundant. Also the calculation used in the info prop is much longer than the example one shown above.

Answer 1

You can refer to the child component with a template reference variable (eg #child ), which will allow you to get the value of the info property. However, the code below causes an ExpressionChangedAfterItHasBeenCheckedError because one property depends on the other being set in the same detection cycle.

<some-component #child 
  [info]="row.calculation.anotherCalculation.information"
  [value]="child.info === 'good-info' ? 'Happy' : 'Sad' ">
</some-component >

See this stackblitz for a demo.

---

The exception mentioned above can be avoided if you set value when a change event is triggered from the child component after info has been set:

export class SomeComponent {

  private _info: string;

  @Output() infoChanged = new EventEmitter<string>();

  @Input() public get info(): string {
    return this._info;
  }
  public set info(x: string) {
    this._info = x;
    this.infoChanged.emit(x);
  }

  @Input() public value: string;
}

<some-component #child 
  [info]="row.calculation.anotherCalculation.information" 
  (infoChanged)="child.value = $event === 'good-info' ? 'Happy' : 'Sad'" >
</some-component>

See this stackblitz for a demo.

Answer 2

I would suggest using a method doing your calculations (in this example only returning the nested attribute), something like

class SomeComponent {
    calculate(row: any) {
        return row.calculation.anotherCalculation.information;
    }
}

Then, in your HTML you can do

<div *ngFor="let row of rows">
    <some-component [info]="calculate(row)"
                    [value]="calculate(row) === 'good-info' ? 'Happy' : 'Sad' "
    ></some-component>
</div>