Как получить входное значение в component.ts из выпадающего списка и текст, созданный в * ngFor в таблице - PullRequest
Новая
       28

Как получить входное значение в component.ts из выпадающего списка и текст, созданный в * ngFor в таблице

1 голос
/ 09 апреля 2020

Я новичок в angular 8. Нужна помощь и совет по получению значений списка из таблицы. В настоящее время в моем html я отображаю данные, которые я получаю от API, как показано в Контроллере API.

В дополнение к этой информации мне нужно фиксировать избыточный вес (да / нет) и рост. Этот список информации будет достаточным.

Например, D SD COMP IND. Рост: Вес Мужской V C Vit DH Да 144 Женский VitD Vit C 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) => {


      }
    );
  }

}

1 Ответ

0 голосов
/ 14 апреля 2020

Вложите таблицу в форму 

<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)
}
...