Angular 从另一个元素获取输入字段值

Question

我在 mat-table 内使用 mat-slide-toggle。每行有一列包含 mat-slide-toggle 和另一列包含一个按钮。我想将 mat-slide-toggle 的值作为参数传递给按钮的点击功能。

<ng-container matColumnDef="show waiting list">
  <mat-header-cell *matHeaderCellDef> Show Waiting List</mat-header-cell>
  <mat-cell *matCellDef="let element">
    <mat-slide-toggle></mat-slide-toggle>
  </mat-cell>
</ng-container>

<ng-container matColumnDef="play">
  <mat-header-cell *matHeaderCellDef> Play</mat-header-cell>
    <mat-cell *matCellDef="let element">
      <button (click)="play(element, toggleValueGoesHere)" mat-icon-button>
        <mat-icon class="mat-18">play_arrow</mat-icon>
      </button>
    </mat-cell>
</ng-container>

如何使用 formControl 实现这一点？如果不行还有别的办法吗？

Answer 1

您可以借助 *matCellDef 轻松实现这一目标。您可以将其分配给行，而不是将其分配给元素。请在下面的 stackblitz 中找到完整的代码：

URL - https://stackblitz.com/edit/angular-emnxjb

在我们的例子中，我们将把这个属性与按钮 ng-container 一起使用，并将传递整行。有了这个，我们也将获得 mat-slide-toggle 的数据。我正在为演示提醒这些值。

我只是在解决如何将值从一列传递到另一列的问题，希望您能处理其余的事情。

如有任何问题，请告诉我。

解决方法的更新代码

在这种方法中，我会跟踪在名为 slideTrueArray 的数组中处于活动状态的垫子滑动切换。当用户单击一个按钮时，它会发送行索引，并且根据该索引是否存在于数组中这一事实，我正在安慰输出。

import {SelectionModel} from '@angular/cdk/collections';
import {Component} from '@angular/core';
import {MatTableDataSource} from '@angular/material/table';

export interface Playlist {
  id: number;
    name: string;
}

const ELEMENT_DATA: Playlist[] = [
  {id: 1, name: 'first'},
  {id: 2, name: 'second'},
  {id: 3, name: 'third'},
];

/**
 * @title Table with selection
 */
@Component({
  selector: 'table-selection-example',
  styleUrls: ['table-selection-example.css'],
  templateUrl: 'table-selection-example.html',
})
export class TableSelectionExample {
  canShowWaitingList: any;
  displayedColumns: string[] = [ 'show waiting list', 'play'];
  dataSource = new MatTableDataSource<Playlist>(ELEMENT_DATA);
  slideTrueArray: number[] = [];

  constructor() {
  }

  play(i: any) {
    const isExist = this.slideTrueArray.indexOf(i);
    const slideValue = isExist !== -1 ? true : false;
    alert(slideValue);
  }

  toggleCurrentSlide(index:number) {
    debugger;
    const isSlideExist = this.slideTrueArray.indexOf(index);
    if(isSlideExist !== -1) {
      this.slideTrueArray.splice(isSlideExist, 1);
    } else {
      this.slideTrueArray.push(index);
    }
  }

}

table-选择-example.html

<mat-table [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="show waiting list">
        <mat-header-cell *matHeaderCellDef> Show Waiting List</mat-header-cell>
        <mat-cell *matCellDef="let element; let i = index;">
            <mat-slide-toggle (change)="toggleCurrentSlide(i)"></mat-slide-toggle>
        </mat-cell>
    </ng-container>

    <ng-container matColumnDef="play">
        <mat-header-cell *matHeaderCellDef> Play</mat-header-cell>
        <mat-cell *matCellDef="let element; let i = index;">
            <button (click)="play(i)" mat-icon-button>
        <mat-icon class="mat-18">play_arrow</mat-icon>
      </button>
        </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

Answer 2

我在此线程上发现了类似的内容。认为它可能对你有帮助。

Angular 从另一个元素获取输入字段值

Angular Get input field value from another element

angular-material

angular

mat-table

angular8