无法在子组件中更改按钮状态

问题描述

我的 Angular 应用程序有一个问题，无法在子组件中更改按钮状态，现在我首先显示我的代码。

这是一个子组件

<child-component
              [(canAddMore)]="canAddMoreSo"
              [index]="index"
              [formGroup]="form"
              [selectedValues]="sovalues"
              controlName="so"
            ></child-component>

和子组件 ts 文件

@input() selectedValues: number[];
  @input() index: number;
  @input() formGroup: FormGroup;
  @input() controlName: string;

  private _canAddMore: boolean;
  @input() public set canAddMore(value: boolean){
    this._canAddMore = value;
    this.canAddMoreChange.emit(value);
  }
  @Output() public canAddMoreChange: EventEmitter<boolean> = new EventEmitter<boolean>();

  constructor() { }

  public add(): void{
    this.canAddMore = false;
  }

  public remove(): void{
    this.canAddMore = true;
    this.formGroup.get(this.controlName).reset();
  }

这个子组件，有2个按钮，一个是添加按钮，可以显示下拉选择，另一个是删除，可以隐藏选择下拉。

这个子组件的 HTML 如下所示：

<label [formGroup]="formGroup">
  <select class="parameterInputSelect" [formControlName]="controlName" *ngIf="!_canAddMore">
    <option *ngFor="let param of selectedValues" [value]="param">{{param}}</option>
  </select>
  <button mat-mini-fab color="primary" matTooltip="Add Sort Order" *ngIf="_canAddMore"
          (click)="add()">
    <mat-icon>add</mat-icon>
  </button>
  <button
    class="delete-button"
    mat-mini-fab color="primary"
    matTooltip="Remove Sort Order"
    (click)="remove()"
    *ngIf="!_canAddMore">
    <mat-icon>delete</mat-icon>
  </button>
</label>

问题是，如果我点击添加按钮和删除按钮，选择下拉菜单将不会被隐藏。

有什么解决办法吗？

解决方法

您正在尝试设置输入值，这是有问题的。与 input 的数据通信是单向的，这意味着您可以将数据从父级传递给子级，但不能通过简单地将值设置为输入值来将数据从子级分配给父级。

您需要做的是使用 Output，然后在父组件上接收事件并在那里设置数据。

首先，您需要传入项目，然后处理一个事件，这是在父组件中的样子：

class ParentComponent {
  crossOffItem(item) {
   //handle here
  }
}

<app-input-output [item]="currentItem" (deleteRequest)="crossOffItem($event)"></app-input-output>

在子组件中：

export class ChildComponent {
  @Input() item;
  @Output() deleteRequest = new EventEmitter()

  deleteItem(item) {
    this.deleteRequest.emit(item)
  }
}

工作堆栈闪电战示例：

https://stackblitz.com/edit/angular-ivy-nzyre4?file=src%2Fapp%2Fhello.component.ts

angular angular angular-input