Question

我以角度实现了一个可编辑数据表。当我单击一个单元格并希望app-editable-text“打开”时。

单击单元格时，我想设置子元素的属性。当单击单元格上的onCellClick方法时，我想访问它的对应app-editable-text组件并将其isOpen属性设置为true。

<td (click)="onCellClick(editableValue)" mat-cell *matCellDef="let element; index as i">
  <div (click)="onCellClick(editableText)" class="editable-value-container">
    <app-editable-text id="0" *ngIf="tableInfo.columnTypes.get(column).name === 'Text'" #editableValue
      [ngClass]="{'edit-active': editableValue.isOpen}" [value]="element[column]">
    </app-editable-text>
  </div>
</td>

在onCellClick内，editableText是undefined

工作示例：https://stackblitz.com/edit/angular-l2ybfg 我需要onCellClick的实现。我不知道如何更改editable-'text / number / ...'的isOpen属性。

Answer 1

使isOpen成为输入

export class EditableNumberComponent implements OnInit {
  @Input() value;
  @Input() isOpen = false;

  constructor() { }

  ngOnInit() {
  }
}

并更改输入值

<td #me (click)="me.isOpen = !me.isOpen" mat-cell *matCellDef="let element; index as i">
  <app-editable-text *ngIf="types.get(column) === 'Text'" [isOpen]="me.isOpen" [value]="element[column]"></app-editable-text>
  <app-editable-number *ngIf="types.get(column)==='Number'" [isOpen]="me.isOpen" [value]="element[column]"></app-editable-number>
</td>

从父元素访问角度元素

1 个答案: