时间戳

首页 > 解决方案 > 如何从下拉列表和 *ngFor 中创建的文本中获取 component.ts 中的输入值

angular - 如何从下拉列表和 *ngFor 中创建的文本中获取 component.ts 中的输入值

问题描述

我是 Angular 8 的新手。需要帮助并建议从表中获取列表值。目前，在我的 html 中，我正在显示从 API 获取的数据，如 API 控制器中所示。

除了这些信息之外，我还需要捕获超重（是/否）和身高。这份信息清单将很多。

例如 D SD COMP IND 超重 身高 男性 Vit C Vit DH 是 144 女性 VitD VitC E 否 124

提交后，我如何从列表中传递那些选定的值并将其作为数组传递给打字稿。并将数组值保存在打字稿中

建议。

API 控制器

  public async Task<ActionResult<IEnumerable<IND>>> GETSM()
   {
        return await _context.Set<IND>()
            .Include(s => s.COMP)
            .ThenInclude(s => s.SD)
            .ThenInclude(s => s.D)
            .AsNoTracking().ToListAsync();
    }

组件 HTML

<div class="table-responsive">
     <table class="table table-striped table-hover table-sm">
       <thead>
         <tr>
           <th>D</th>
           <th>SD</th>
           <th>COMP</th>
           <th>IND</th>
           <th>weight</th>
           <th>height</th>
         </tr>
       </thead>
       <tbody>
         <tr *ngFor="let sMAdd of service.sMAdd">
           <td>{{ sMAdd.COMP.SD.D.description }}</td>
           <td>{{ sMAdd.COMP.SD.description }}</td>
           <td>{{ sMAdd.COMP.description }}</td>
           <td>{{ sMAdd.description }}</td>
           <td>
             <select class="form-control" formControlName="weight">
               <option [ngValue]="0">No</option>
               <option [ngValue]="1">Yes</option>
             </select>
           </td>
           <td>
             <input class="form-control" type="text" formControlName="height" placeholder="">
           </td>
     </table>    </div>    <div class="col">
     <button class="btn btn-success btn-large btn-block" type="submit"><i class="fas fa-save"></i> Submit</button></div>

打字稿

import { Component, OnInit } from '@angular/core';
import { sMAddService } from 'src/app/services/smm.service';
import { SMMrAdd } from 'src/app/model/staffmonitoringMaster.model'
import { DatePipe, formatDate } from '@angular/common';
import { FormArray,FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-smm-add',
  templateUrl: './smm-add.component.html',
  styleUrls: ['./smm-add.component.css']



})

export class SMMAddComponent implements OnInit {


  mAddForm: FormGroup;


  constructor(private formBuilder: FormBuilder, private service: sMAddService) { }

  ngOnInit() {

    this.mAddForm = this.formBuilder.group({
      evalaution: this.formBuilder.array([]),
      weight: [''],
      height:['']

    })
  }



  onSubmit() {
    const mAdd = this.mAddForm.value as SMMAdd;

    this.service.postSM(mAdd).subscribe(

      (result: Response) => {


      }
    );
  }

}

标签： angularangular-reactive-formsformgroups

解决方案

在表格中附上表格

<form [formGroup]='form' (onSubmit)="submit()">
  //Your table goes here
</form>

在打字稿中

form: FormGroup

contructor(private fb: FormBuilder) {}

ngOnInit() {
  this.form = this.fb.group({
     weight: new FormControl("")
     height: new FormCOntrol("")
  })
}

submit() {
  this.form.get('weight').valueChanges.subscribe(item => {
     this.weights.push(item)
  }
  this.height.push(this.form.height)
}

推荐阅读