时间戳

首页 > 解决方案 > 使用输入 ngFor 访问表中的值更改

angular - 使用输入 ngFor 访问表中的值更改

问题描述

我正在尝试检测包含带有输入的 aa 列的表中的更改。我可以通过 [value]="element.value" 设置值，但是，如何检测表的 ngFor 内值的变化？我正在尝试设置 fromBuilder 数组，但出现以下错误：

core.js:6210 错误类型错误：无法读取 null 的属性“_rawValidators”

我从未与 fromArrays 合作过，任何帮助都会很棒：

谢谢！！

我的ts：

import { Component, OnInit, Input, ViewChild, ChangeDetectorRef, AfterViewChecked } from '@angular/core';

import { FormGroup, FormBuilder, Validators, FormArray, FormControl, ValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms';

@Component({
    selector: 'app-config',
    templateUrl: './app-config.component.html',
    styleUrls: ['./app-config.component.scss'],
})

 ngOnInit(): void {
       
        this.objectForm = this.formBuilder.group({
            formData: this.formBuilder.array([])
        });

我的html：


<form fxLayout="row" fxLayoutAlign="center center" [formGroup]="objectForm">
  <table mat-table [dataSource]="this.dataSource" class="mat-elevation-z8">

    <ng-container matColumnDef="key">
      <th mat-header-cell *matHeaderCellDef> Key </th>
      <td mat-cell *matCellDef="let element"> {{element.rootKey}} </td>
    </ng-container>
    <ng-container matColumnDef="value" formArrayName="formData">
      <th mat-header-cell *matHeaderCellDef> Value </th>
      <td mat-cell *matCellDef="let element;  let index = index">
        <mat-form-field appearance="standard">
          <input matInput [type]="element.type" [value]="element.value" [formControlName]="element.value"> //this doens't work
        </mat-form-field>
      </td>
    </ng-container>



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

标签： angulartypescript

解决方案

关于您已删除的问题：将对象转换为其原始形式[关闭]

const data1 = 
  { 'logApp.logText'          : 'kajsdhas'
  , 'logApp.refresh'          : 5
  , 'logDocker.logText'       : 'Hola Emili!'
  , 'logDocker.refresh'       : 30
  , 'dockerMotor.speed'       : '100'
  , 'dockerMotor.range'       : '64'
  , 'dockerMotor.enabled'     : true
  , 'dockerMotor.plcIP'       : '0000000'
  , 'dockerMotor.port'        : 502
  , 'dockerMotor.waitTime'    : '10'
  , 'dockerMotor.chatEnabled' : true
  } 
const data2 = 
  Object
  .entries(data1)
  .reduce((obj,[keys,val])=>
    {
    let elm = obj
    keys.split('.').forEach((key,i,{[i+1]:next}) =>
      {
      if (next) 
        {
        if (!elm[key]) elm[key] = {}
        elm = elm[key]
        }
      else  elm[key] = val
      })
    return obj
    },{})

console.log( data2 )
.as-console-wrapper {max-height: 100%!important;top:0 }

推荐阅读