Angular Получить значение поля ввода из другого элемента

Question

Я использую тумблер внутри мат-таблицы. В каждой строке есть столбец, содержащий 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 и передадим весь строка. И с этим у нас будут данные о мат-слайде-переключателе также. Я оповещаю об этих значениях для демонстрации.

Я просто решаю вопрос о том, как передать значение из одного столбца в другой, надеюсь, вы справитесь с остальными.

Пожалуйста, дайте мне знать, если возникнут вопросы .

ОБНОВЛЕННЫЙ КОД ДЛЯ ВОЗМОЖНОГО РЕШЕНИЯ

В этом подходе я отслеживаю переключение матового слайда, которые активны в массиве, называемом 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-selection-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 по ng-click