输入在Angular Material扩展面板中不起作用。无法添加空间

Question

我在Angular Material扩展面板中输入了文本。但是，当我尝试在输入字段中添加空格时，它会切换扩展面板。您如何解决这个问题？

包含输入的面板的代码：     

  <mat-expansion-panel-header [collapsedHeight]="'1.55em'" [expandedHeight]="'1.55em'">
    <div class="header-left-container">
      <i class="fas fa-question"></i>
      <div *ngIf="isEditing == false" class="name">{{question.questionStr}}</div>
      <div *ngIf="isEditing == true">
        <input #textfield type="text" onClick="this.select; event.stopPropagation()()" [(ngModel)]="question.questionStr" placeholder="Title" />
      </div>
      <mat-checkbox *ngIf="isEditing == false" class="check-box" (click)="$event.stopPropagation()" (change)="checkChanged()" [(ngModel)]="question.isChecked"></mat-checkbox>
    </div>
    <div class="header-right-container">
      <button style="margin-right: 10px" *ngIf="!isEditing && !hideButtons" mat-raised-button (click)="editClicked($event); $event.stopPropagation()" [color]="'primary'">Edit</button>
      <button style="margin-right: 10px" *ngIf="isEditing && !hideButtons" mat-raised-button (click)="saveEditClicked($event); $event.stopPropagation()" [color]="'primary'">Save</button>
      <button *ngIf="!hideButtons" mat-raised-button (click)="addAnswer($event); $event.stopPropagation()" [color]="'primary'">
        <i class="fas fa-plus"></i>
        Add answer
      </button>
    </div>
  </mat-expansion-panel-header>

  <div *ngFor="let answer of question.answers">
    <app-answer-panel [hideButtons]="hideButtons" [answer]="answer"></app-answer-panel>
  </div>

</mat-expansion-panel>

Answer 1

通过在输入中添加(keydown)="$event.stopPropagation()"来解决。空格键不再切换，添加空格即可。

Answer 2

我们还可以将自定义停止传播写入输入[(keydown)="stopPropagation($event)"]。

`stopPropagation(ev: KeyboardEvent): void {
    if (ev.key === ' ') {
        ev.stopPropagation();
    }
    if (ev.key === 'Enter') {
        ev.preventDefault();
    }
}`