如何从下拉菜单中设置所选文本

Question

当我选择一个下拉项时，我需要一个下拉列表中所选项目的文本，很长一段时间，我没有得到任何问题的解决方案。我为此制定了一个通用指令，以便在使用我的指令时可以获取所有下拉列表的文本。这是我的代码

app.component.html

<hello name="{{ name }}"></hello>
<p>
    Start editing to see some magic happen :)
</p>

<div>
    <p>Come from directive: {{selectedText}} </p>
    <p>Come from Parent Component - {{selectedProp}}</p>
    <select [psSelectText]="'selectedText'"  name="selectedProp" [(ngModel)]="selectedProp" >
    <option value=""></option>
    <option *ngFor="let i of arrayList" value="{{i.value}}">{{i.text}}</option>
  </select>
</div>
<br>
<button (click)="hitMe()">Hit me</button>

我的指示：

import { Directive, ElementRef, HostListener, Input, SimpleChanges, OnChanges, Output, EventEmitter, ViewContainerRef } from '@angular/core';
import { NgModel } from '@angular/forms';
import { SelectText } from './select-text.model';

@Directive({
  selector: '[ngModel][psSelectText]',
  providers: [NgModel],
  host: {
    '(ngModelChange)': 'onInputChange($event)'
  }
})
export class PsSelectText implements OnChanges {
  @Input('psSelectText') selectedText: string;
  @Input('ngModel') selectedModel: NgModel;

  constructor(private el: ElementRef, public model: NgModel, private viewContainerRef: ViewContainerRef) { }


  ngOnChanges(changes: SimpleChanges) {
    console.log(this.el)
    if (changes.selectedModel) {
      // this.selectedText.valueAccessor.writeValue(changes.selectedModel.currentValue);
      setTimeout(() => {
        this.viewContainerRef['_view'].component[this.selectedText] =
          this.el.nativeElement.selectedOptions[0].text;
      }, 0);
    }
  }

  onInputChange(event) {
    // Only get selected change
  }
}

我已经通过传递单个变量[psSelectText]="'selectedText'",来完成此操作，但我想传递一个对象属性selectedText2.text，这里需要将下拉文本设置为selectedText2.text属性为指令。

我需要，我想像这样传递属性：

[psSelectText]="selectedText2.text"

并将我的指令下拉文本设置为此字段selectedText2.text

有没有办法做到这一点？非常感谢你。

实际上，需要在这里改变：

// "this.selectedText2.text" this property will come from dynamically,
        this.viewContainerRef['_view'].component[this.selectedText2.text] =
          this.el.nativeElement.selectedOptions[0].text;

但是：Kua zxsw指出

https://stackblitz.com/edit/angular-dropdown-selected-text

Answer 1

我想你是期待的

• 将对象传递给您的指令而不是文本
• 根据传递的对象在屏幕上指定一个值（通过指令）

请看一下这个，让我知道这是不是你想要的？ https://angular-dropdown-selected-text.stackblitz.io

ps-select-text.directive.ts和app.component.html如下

https://stackblitz.com/edit/angular-wbu8us

/* tslint:disable:member-ordering */
import { Directive, ElementRef, HostListener, Input, SimpleChanges, OnChanges, Output, EventEmitter, ViewContainerRef } from '@angular/core';
import { NgModel } from '@angular/forms';
import { SelectText } from './app.component';

@Directive({
  selector: '[ngModel][psSelectText]',
  providers: [NgModel],
  host: {
    '(ngModelChange)': 'onInputChange($event)'
  }
})
export class PsSelectText implements OnChanges {
  @Input('psSelectText') selectedText: SelectText;
  @Input('ngModel') selectedModel: NgModel;

  constructor(private el: ElementRef, public model: NgModel, private viewContainerRef: ViewContainerRef) { }


  ngOnChanges(changes: SimpleChanges) {
    /*
    console.log(this.el);
    console.log(this.selectedText);
    console.log(this.viewContainerRef['_view'].component);
    */
    
    if (changes.selectedModel) {
      // this.selectedText.valueAccessor.writeValue(changes.selectedModel.currentValue);
      setTimeout(() => {

        if (this.selectedText) {
          this.viewContainerRef['_view'].component.selectedText = "(from inside Directive)" + this.selectedText.stText;
        }

        // "this.selectedText" this property will come from dynamically,
          /* 
        this.viewContainerRef['_view'].component[this.selectedText] = 
          this.el.nativeElement.selectedOptions[0].stText;
          */
      }, 0);
    }
  }

  onInputChange(event) {
    // Only get selected change
  }
}


/*
Copyright 2017-2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

Answer 2

以下代码是编码

HTML：

<hello name="{{ name }}"></hello>
<p>
	Start editing to see some magic happen :)
</p>

<div>
	<p>Come from directive: <mark>{{selectedText}}</mark> </p>
	<p>Come from Parent Component [ngModel]: 
    <span *ngIf="selectedText2"> 
      v: <mark>{{selectedText2.stValue}}</mark> & 
      t: <mark>{{selectedText2.stText}}</mark> 
    </span> 
  </p>
	<select [psSelectText]="selectedText2"  name="selectedProp" [(ngModel)]="selectedText2" >
    <option value=""></option>
    <option *ngFor="let i of arrayList" [ngValue]="i" >{{i.stText}}</option>
  </select>
</div>
<br>
<button (click)="hitMe()">Hit me</button>

指示：

<hello name="{{ name }}"></hello>
<p>
    Start editing to see some magic happen :)
</p>

<div>
    <p>Come from directive: {{selectedText}} </p>
    <p>Come from Parent Component - {{selectedProp}}</p>
    <select [psSelectText]="'selectedText'"  name="selectedProp" [(ngModel)]="selectedProp" >
    <option value=""></option>
    <option *ngFor="let i of arrayList" value="{{i.value}}">{{i.text}}</option>
  </select>
</div>
<br>
<button (click)="hitMe()">Hit me</button>

零件：

import { Directive, ElementRef, HostListener, Input, SimpleChanges, OnChanges, Output, EventEmitter, ViewContainerRef } from '@angular/core';
import { NgModel } from '@angular/forms';
import { SelectText } from './select-text.model';

@Directive({
  selector: '[ngModel][psSelectText]',
  providers: [NgModel],
  host: {
    '(ngModelChange)': 'onInputChange($event)'
  }
})
export class PsSelectText implements OnChanges {
  @Input('psSelectText') selectedText: string;
  @Input('ngModel') selectedModel: NgModel;

  constructor(private el: ElementRef, public model: NgModel, private viewContainerRef: ViewContainerRef) { }


  ngOnChanges(changes: SimpleChanges) {
    console.log(this.el)
    if (changes.selectedModel) {
      setTimeout(() => {
        this.viewContainerRef['_view'].component[this.selectedText] =
          this.el.nativeElement.selectedOptions[0].text;
      }, 0);
    }
  }

  onInputChange(event) {
    // Only get selected change
  }
}

import { Component, OnInit } from '@angular/core';
import { SelectText } from './select-text.model';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular';
  selectedProp: string;
  selectedText: any = "yellow";
  selectedText2: SelectText;
  arrayList: Array<any> = [];

  hitMe() {
    this.selectedProp = "2";
  }

  ngOnInit() {
    // this.selectedText = new SelectText();    
    this.arrayList.push({ value: 1, text: "First Value" });
    this.arrayList.push({ value: 2, text: "Second Value" });
    this.arrayList.push({ value: 3, text: "Third Value" });
    this.arrayList.push({ value: 4, text: "Fourth Value" });
    this.arrayList.push({ value: 5, text: "Fifth Value" });
  }
}

：