Winkel-4 Erhalten, der Text der Ausgewählten option, Wählen Sie "Steuerung"

Ich versuche, den Text der Ausgewählten option, Wählen Sie "Steuerung" im Winkel 4.

HTML:

<div class="col-sm-6 form-group">
<label>Industry</label>
<select   class="form-control select"  formControlName="Industry">
<option value="">Please select Value</option>  
<option *ngFor="let industry of industries"  
[ngValue]="industry.ID">{{industry.Name}}  
</option>  
</select> 
</div>


upload.component.ts
this.form.controls['Industry'].valueChanges.subscribe((name) => {
                this.form.controls['IndustryName'].setValue(name);
  });

Ich bin mit formControlName Eigenschaft von Reaktiv.

Freundlich darauf hin die Idee, ermittelt werden der Text Ausgewählt, Wählen Sie "Steuerung"

was ist der Fehler, die Sie erhalten
Könnten Sie liefern einige mehr code, wo und wie du versuchst den text?
ich möchte, um die Gewählte Branche Text in "IndustryName" formcontrolname

InformationsquelleAutor Pravin | 2017-11-10

angular angular-reactive-forms

5

Der einfachste Weg das zu erreichen ist: Holen Sie sich die id aus HTML, heben ein Ereignis mit der id-Wert und dann durchsuchen Sie Ihre Sammlung für das Element.

HTML
```
<select class="form-control" [(ngModel)]="selectedStatusId" (change)="setSelectedStatus(selectedStatusId)">
   <option *ngFor="let status of statusList" [value]="status.id">{{status.name}}
   </option>
</select>
```
Typoskript
```
public setSelectedStatus(value: string): void {

  if (this.statusList && value) {
     let status: ListItemSimplified = this.statusList.find(s => s.id == value);
     if (status)
       this.selectedStatus = status.name;
   }
   else
      this.selectedStatus = '';
 }
```
Model-Klasse
```
export class ListItemSimplified {
  id: string;          
  name: string;         
}
```
Er versucht, um den ausgewählten Wert nicht gesetzt werden.
Cheng, Sie sind richtig, aber der direkteste Weg, um den ausgewählten Wert bindet das Steuerelement an eine variable, die jedes mal also, wenn sich die Auswahl ändert, werden Sie immer noch auf dem aktualisierten Wert. Dies könnte auch getan werden mit "Template Referenz-Variablen" oder sogar mit ElementRef. Aber, wie gesagt, die direkteste Ansatz, den ich kenne, ist die, die ich vorgeschlagen habe. Kennst du eine bessere Möglichkeit? Bitte teilen Sie mit uns.

InformationsquelleAutor Daniel Santana

getSelectedOptionText(event: Event) {
   let selectedOptions = event.target['options'];
   let selectedIndex = selectedOptions.selectedIndex;
   let selectElementText = selectedOptions[selectedIndex].text;
   console.log(selectElementText)
}

HTML

<select class="form-control select" formControlName="Industry" (change)="getSelectedOptionText($event)">
  <option value="">Please select Value</option>  
  <option *ngFor="let industry of industries" value="{{industry.ID}}">{{industry.Name}}</option>
</select>

InformationsquelleAutor Charmy Shah

Können Sie einfach Holen Sie sich den ausgewählten Wert und text mit dem $event-Eigenschaft

html-code

<label>Select Market</label><br/> 
<select class="user-preselect btn-add" style="width: 90%;height: 34px;"(change)="selectchange($event)"> 
<option value="0" selected="selected">ADD Market</option> 
<option *ngFor="let country of Countrylist" [value]="country.id" >{{country.name}}</option> 
</select><br/><br/>

Typoskript-code

selectchange(args){ 
  this.countryValue = args.target.value; 
  this.countryName = args.target.options[args.target.selectedIndex].text; 
}

InformationsquelleAutor khan Farman

Können Sie

<select class="form-control" (change)="onChange($event)">

</select>

dann in der Komponente

onChange($event){
let text = $event.target.options[$event.target.options.selectedIndex].text;
}

InformationsquelleAutor malballah

Nehmen Sie die folgenden änderungen

Vorlage

<form [formGroup]="test">
    <div class="col-sm-6 form-group">
        <label>Industry</label>
        <select class="form-control select" formControlName="Industry">
      <option *ngFor="let industry of industries"  [ngValue]="industry.id">{{industry.id}} </option>  
</select>
    </div>
</form>

<pre>{{test.value | json}} </pre>

Komponente

import { Component,OnInit } from '@angular/core';
import {FormArray, FormGroup, FormControl, Validators} from "@angular/forms";

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit { 
  name = 'Angular 5';
  test:FormGroup;
  industries = [{id:1},{id:2}];

  ngOnInit(){
     this.test = new FormGroup({
      Industry:new FormControl('')
    });

    this.test.get('Industry').valueChanges.subscribe(data => console.log(data));

  }

}

funktionierender Link

Danke Rahul für Ihre Antwort. Aber ich möchte text in der Industrie. ZB: in Meiner Branche hat die Werte {Id: 1 , Name: Pravin Id: 2 , Name : Rahul} Nach der Auswahl von "Pravin" Text , kann ich in der Lage, um den Wert als "1" aber ich möchte Text, z.B. "Pravin"
udpated die woking-link überprüfen
Hi Rahul, ich will nicht zu ändern Sie die Eigenschaft "Wert" der Option. Es sollte {{- Industrie.Id}} nur
dann, was Sie wollen, können Sie die Daten in compoennt und verwenden Sie es in das array, um den Wert
Können Sie das bitte zeigen

InformationsquelleAutor Rahul Singh

Versuchen Sie Folgendes:

Vorlage

upload.component.html

<form [formGroup]="form">
  <div class="col-sm-6 form-group">
    <label>Industry</label>
      <select class="form-control select" 
        formControlName="industry" (change)="onChange()">
          <option value="">Please select Value</option>  
          <option *ngFor="let industry of industries"  
            [ngValue]="industry.id">{{ industry.name }}  
          </option>  
      </select> 
  </div>
</form>

Komponente

hochladen.Komponente.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from "@angular/forms";

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

export class UploadComponent implements OnInit { 
  form: FormGroup;
  select: FormControl;
  industries = [
    {id: 1, name: 'Mining'},
    {id: 2, name: 'Information Technology'},
    {id: 3, name: 'Entertainment'}
  ];

  ngOnInit(){
    this.createForm();
  }

  createForm() {
    this.select = new FormControl('');
    this.form = new FormGroup({
      select: this.select
    });
  }

  onChange() {
    console.log(this.select.value);

    # to get the name that was selected

    const id = parseInt(this.select.value, 0);
    const selected = this.industries
      .filter(industry => industry.id === id)
      .reduce(function(str: string, project) {
        return str + project.name;
      }, '');

    console.log(selected.name);
  }
}

Hoffe, das hilft, und auf Zeit. 🙂

InformationsquelleAutor user3214005

Können Sie einfach tun:

Ihrer Ansicht

<select class="select" (change)="onChange($event.target.value)" [(ngModel)]="someObject.BoundItem" name="BoundItem" #BoundItem="ngModel">
   <option *ngFor="let item of myObject" [value]="item.Id">{{item.displayiItem}}</option>
</select>

In der Komponente

onChange(selectedId: number)
{
   this.selectedItem = this.myObject.find((x: any) => x.Id == selectedId); 
   console.log(this.selectedItem["displayItem");
}

InformationsquelleAutor Jnr

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.