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

【问题标题】：Angular Get input field value from another elementAngular从另一个元素获取输入字段值
【发布时间】：2020-06-07 09:14:06
【问题描述】：

我在 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 来实现？如果没有，还有其他方法吗？

【问题讨论】：

我已经有一段时间没有使用 Angular 了，但是在 React 中，您可以将切换按钮的状态提升到最近的公共父组件。该父组件将传递一个函数以将状态更改为切换按钮，并将实际状态值传递给按钮。切换会改变父组件的状态，同时更新两个子组件。
这两个元素的共同父元素是 mat-table，它也包含所有行。从那里更新状态会改变所有行的状态。
mat-table 是树中最接近的“组件”，但我的意思是最接近的 Angular 组件，它实际上可以保持自定义状态。如果我没记错的话，角度组件是由 .html 文件和 .ts 文件拆分而成的？在 .ts 脚本中创建一个状态变量，并将其传递给切换和按钮。切换可以改变状态，按钮将从中读取（双向绑定），Angular 应该优化以只更新这两个特定组件，否则，渲染应该可以忽略不计。

标签： angular angular-material angular8 mat-table

【解决方案1】：

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

网址 - 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-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>

【讨论】：

我正在使用 let row 但它仍然返回元素。 <ng-container matColumnDef="play"> <mat-header-cell *matHeaderCellDef> Play</mat-header-cell> <mat-cell *matCellDef="let row"> <button (click)="play(row)" mat-icon-button> <mat-icon class="mat-18">play_arrow</mat-icon> </button> </mat-cell> </ng-container>
你能像我创建的那样创建一个stackblitz吗，这样检查你的代码会更容易。因为你可以检查我的代码模板和 ts 文件，它的工作
我不想创建一个变量来存储 mat-slide-toggle 值，因为我以后不需要它。重新加载后它将重置为选中状态。当点击播放按钮时，我只会使用一次。
嗨，伙计，我认为这是我们拥有数据来跟踪列的最理想方式。如果您需要一种解决方法，那么我们仍然需要维护一个关于哪些 mat-slides 是真的，哪些不是。我在这里更新代码，你可以复制粘贴到你的 stackblitz 中检查。

【解决方案2】：

我在这个帖子上发现了类似的东西。认为它可能会帮助你。

Pass checkbox value to angular's ng-click

【讨论】：