Как получить все значения текстового поля из HTML в компоненте Angualr - PullRequest
Новая
       2

Как получить все значения текстового поля из HTML в компоненте Angualr

0 голосов
/ 26 апреля 2019

Я успешно получаю данные из webapi и могу показывать их на HTML-странице angularjs2, как показано ниже 

    <div>
        <br />
        <br />
        <div style="text-align: center;">

            <h4>Employee Personal Information</h4>
        </div>
        <div style="text-align: right;">
            <label class="InformationTextColor">{{EmployeeName}}({{EmployeeCode}})</label>
        </div>
        <div style="text-align: center;">
            <table id="tblEnquire1" style="margin-left:50px;" class="table table-hover table-bordered table-striped table-responsive" border="1">
                <thead style="background-color:#0E8494;">
                    <tr>
                        <th class="text-center" style="color:white;"></th>
                        <th class="text-center" style="color:white;"></th>
                        <th class="text-center" style="color:white;"></th>
                        <th class="text-center" style="color:white;"></th>
                        <th class="text-center" style="color:white;"></th>
                        <th class="text-center" style="color:white;"></th>
                        <th class="text-center" style="color:white;"></th>
                        <th class="text-center" style="color:white;"></th>

                    </tr>
                </thead>
                <tbody>
                    <ng-container *ngFor="let employee of PersonalInformation.personalInformationDetails;">
                        <tr>
                            <td><label class="InformationTextColor "> Name:</label></td>
                            <td><input type="text" class="form-control " [(ngModel)]="employee.EmployeeName" /></td>
                            <td><label class="InformationTextColor ">Father Name:</label></td>
                            <td><input type="text" class="form-control " [(ngModel)]="employee.fname" /></td>
                            <td><label class="InformationTextColor ">Mother Name:</label></td>
                            <td><input type="text" class="form-control " [(ngModel)]="employee.mname" /></td>
                            <td><label class="InformationTextColor ">Designation:</label></td>
                            <td><input type="text" class="form-control " [(ngModel)]="employee.EmployeeDesignation" /></td>
                        </tr>
                        <tr>

                            <td><label class="InformationTextColor "> Category:</label></td>
                            <td><input type="text" class="form-control " [(ngModel)]="employee.category" /></td>
                            <td><label class="InformationTextColor ">Blood Group:</label></td>
                            <td><input type="text" class="form-control " [(ngModel)]="employee.bloodgrp" /></td>
                            <td><label class="InformationTextColor ">PAN Number:</label></td>
                            <td><input type="text" class="form-control " [(ngModel)]="employee.PAN" /></td>
                            <td><label class="InformationTextColor ">Gender:</label></td>
                            <td><input type="text" class="form-control " [(ngModel)]="employee.sex" /></td>
                        </tr>
                        <tr>

                            <td><label class="InformationTextColor ">LandLine Provider:</label></td>
                            <td><input type="text" class="form-control " [(ngModel)]="employee.LandlineServiceNmae" /></td>
                            <td><label class="InformationTextColor ">LandLine Number:</label></td>
                            <td><input type="text" class="form-control " [(ngModel)]="employee.LandlineNumber" /></td>
                            <td><label class="InformationTextColor ">BroadBand Provider:</label></td>
                            <td><input type="text" class="form-control " [(ngModel)]="employee.BroadBandServiceName" /></td>
                            <td><label class="InformationTextColor ">BroadBand Number:</label></td>
                            <td><input type="text" class="form-control " [(ngModel)]="employee.BroadBandNumber" /></td>
                        </tr>
                        <tr>

                            <td><label class="InformationTextColor ">Mobile Provider:</label></td>
                            <td><input type="text" class="form-control " [(ngModel)]="employee.MobileServiceName" /></td>
                            <td><label class="InformationTextColor ">Mobile Number:</label></td>
                            <td><input type="text" class="form-control " [(ngModel)]="employee.MobileNumber" /></td>
                            <td><label class="InformationTextColor ">Bank Name:</label></td>
                            <td>
                                <select [(ngModel)]="selectedvalue" class="form-control">
                                    <option value="">--Select--</option>
                                    <option *ngFor="let bankdropdown of PersonalInformation.DistinctBankName" [value]="bankdropdown.BankNameID"> {{bankdropdown.BankName}}</option>
                                </select>
                            </td>
                            <td><label class="InformationTextColor ">Date of Birth:</label></td>
                            <td><input type="text" class="form-control " [(ngModel)]="employee.dob" /></td>
                        </tr>
                        <tr>

                            <td><label class="InformationTextColor ">Account Number:</label></td>
                            <td><input type="text" class="form-control " [(ngModel)]="employee.AccountNumber" /></td>
                            <td><label class="InformationTextColor ">Email ID:</label></td>
                            <td><input type="text" class="form-control " [(ngModel)]="employee.email" /></td>
                            <td><label class="InformationTextColor ">Posting:</label></td>
                            <td>
                                <select [(ngModel)]="posting" class="form-control">
                                    <option value="">--Select--</option>
                                    <option *ngFor="let bankdropdown of PersonalInformation.DistinctPostingName" [value]="bankdropdown.EmployeePostingid"> {{bankdropdown.EmployeePostingName}}</option>
                                </select>
                            </td>
                            <td><label class="InformationTextColor ">Nationality:</label></td>
                            <td><input type="text" class="form-control " [(ngModel)]="employee.nationality" /></td>
                        </tr>
                    </ng-container>
                    <!--If the web service takes time to return data, the message in this <tr>
                    is displayed. When the service call returns this message disappears
                    and the employees data is displayed-->
                    <tr *ngIf="!PersonalInformation.personalInformationDetails">
                        <td colspan="5">
                            Loading data. Please wait...
                        </td>
                    </tr>
                    <!--This message is displayed if the web services does not return any data-->
                    <tr *ngIf="PersonalInformation.personalInformationDetails && PersonalInformation.personalInformationDetails.length==0">
                        <td colspan="5">
                            No employee records to display
                        </td>
                    </tr>
                </tbody>

            </table>

        </div>
        <br />
        <div style="text-align: center;">
            <button id="enable" type="submit"  class="btn btn-primary btnEditEmployeeInfo">Edit Information</button>
            <button id="Unable" type="submit" style="visibility:hidden;" class="btn btn-primary btnupdateEmployeeInfo">Update Information</button>
        </div>


    </div>

, но как только я редактирую несколько значений текстового поля, после нажатия кнопки не удается получить все текстовые поля (отредактированные значения) значения в событии щелчка component.ts - это PostPersonalInformation () 

import { Component, Input, OnInit,Output,EventEmitter } from '@angular/core';
import { IEmployeePersonalInformation } from './PersonalInforamtion';
import { EmployeeService } from './PersonalInformationService';
import { IPersonalDetailsInterface } from './PersonalInforamtion';


@Component({
    selector: 'list-employee',
    templateUrl: 'app/PersonalInformation/PersonalInformation.component.html',
    styleUrls:['app/PersonalInformation/PersonalInformation.css'],
    providers: [EmployeeService]
})
export class EmployeeListComponent implements OnInit {
    employees: IEmployeePersonalInformation;
     PersonalInformation: IPersonalDetailsInterface
    selectedvalue: string;
    firstarray: number = 0;
    EmployeeCode: string;
    EmployeeName: string;
    posting: string;


    constructor(private _employeeService: EmployeeService) { }

    PostPersonalInformation(): void
    {
        console.log("Hey this is post" + this.employees);
        console.log("Hey this is post" + this.EmployeeName);
        this.firstarray = 0;
        for (let personaldata in this.employees) {
            if (this.firstarray == 0) {

                this.firstarray = 1;
                console.log(this.employees[personaldata]);
            }

        }


        this._employeeService.PostPersonalInformation(this.employees);

    }

    ngOnInit() {
        this._employeeService.getEmployees()
            .subscribe((employeeData) => {
            this.employees = employeeData;

            });

        this._employeeService.getPersonalInformationList()
            .subscribe((employeeData1) => {
                this.PersonalInformation = employeeData1;
                console.log(employeeData1);
                for (let personaldata in employeeData1)
                {
                    if (this.firstarray == 0)
                    {
                        this.selectedvalue = employeeData1[personaldata][0]['BankCode'];
                        this.EmployeeCode = employeeData1[personaldata][0]['EmployeeCode'];
                        this.EmployeeName = employeeData1[personaldata][0]['EmployeeName'];
                        this.posting = employeeData1[personaldata][0]['PostingCode'];
                        this.firstarray = 1;
                        console.log(employeeData1[personaldata][0]['PostingCode']);
                         }

                }


            });
    }

}

как получить значения всех текстовых полей со страницы html >>

1 Ответ

1 голос
/ 26 апреля 2019

Вы можете создать сервис, используя HttpClient, вот так (я издеваюсь по API, получая файл JSON) 

 @Injectable()
    export class ConfigService {

      constructor(private http: HttpClient) { }

      getData() {
        return this.http.get('/assets/config.json');
      }
    }

Используйте сервис в вашем компоненте 

export class AppComponent {
  myresult: any;
  name = "Display data from service";
  constructor(private config: ConfigService) { }

  ngOnInit() {
    this.config.getData()
      .subscribe((result: any) => {

        this.myresult = result.PersonalInfolistModel;
        console.log(this.myresult)
      });
  }
}

А для отображения вашего значения используйте ngFor в HTML 

<p *ngFor="let item of myresult">{{item.EmployeeName}}</p>

Демо https://stackblitz.com/edit/read-local-json-file-service

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...