Question

我有3个下拉菜单，这些菜单必须具有唯一的值（我在此处分配网络适配器），因此，如果在下拉菜单1中选择了一个网卡，则必须在下拉菜单2和3中将其禁用。我找到了this answer和其他几个，但是我无法使它们正常工作。

component.ts

nicAdapters: any[] = ['nic0','nic1','nic2','nic3','nic4','nic5','nic6','nic7','nic8','nic9','nic10']


   this.inputForm = this.fb.group({
    upLinks: this.fb.group ({
         NumberUplinks: ['2'],
            uplinksMgmt: this.fb.group ({
                uplink1: ['nic0'],
               uplink2: ['nic1'],
               uplink3: ['nic3'],
            })
        })
})

component.html

<div class="select" formGroupName="uplinksMgmt">
    <select formControlName="uplink1" id="uplink1Id" class="selectBox">
        <option *ngFor="let uplink1x of nicAdapters" [ngValue]="uplink1x">{{uplink1x}}</option>
    </select>
</div>
<div class="select" formGroupName="uplinksMgmt">
     <select formControlName="uplink2" id="uplink2Id" class="selectBox">
       <option *ngFor="let uplink2x of nicAdapters" [ngValue]="uplink2x">{{uplink2x}}</option>
    </select>
</div>
<div class="select" formGroupName="uplinksMgmt">
    <select formControlName="uplink3" id="uplink3Id" class="selectBox">
        <option *ngFor="let uplink3x of nicAdapters" [ngValue]="uplink3x" {{uplink3x}}</option>
    </select>
</div>

Answer 1

如果在其他位置选择了必需的选项，请设置disabled属性

<div class="select" formGroupName="uplinksMgmt">
    <select formControlName="uplink1" id="uplink1Id" class="selectBox">
        <option *ngFor="let uplink1x of nicAdapters" [ngValue]="uplink1x" [disabled]="uplink1x === form.controls.uplink2.value || uplink1x==form.controls.uplink3.value " >{{uplink1x}}</option>
    </select>
</div>

显然form是FormGroup，您必须为此设置poper变量名，因为您没有提供相关的组件代码。

Answer 2

尝试使用此自定义管道将有助于过滤数据。另请参考此链接以供参考sample

*。component.ts

import { Component,Pipe,PipeTransform } from '@angular/core';


@Pipe({name: 'filter'})
export class FilterPipe implements PipeTransform {
transform(value: any,key: string): any {    
  if (!value || !key) {return value;}  
  return value.filter( value =>(value.search(key) !== 0));
}
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {  
  nicAdapters: any[] = ['nic0','nic1','nic2','nic3','nic4','nic5','nic6','nic7','nic8','nic9','nic10'];
  selectedValue:any;

}

*。component.html

<div class="select">
    <select id="uplink1Id" class="selectBox" (change)="selectedValue=$event.target.value">
        <option *ngFor="let uplink1x of nicAdapters" [ngValue]="uplink1x">{{uplink1x}}</option>
    </select>
</div>
<div class="select">
     <select id="uplink2Id" class="selectBox" >
       <option *ngFor="let uplink2x of nicAdapters | filter:selectedValue" [ngValue]="uplink2x">{{uplink2x}}</option>
    </select>
</div>
<div class="select">
    <select id="uplink3Id" class="selectBox" >
        <option *ngFor="let uplink3x of nicAdapters | filter:selectedValue" [ngValue]="uplink3x"> {{uplink3x}}</option>
    </select>
</div>

Answer 3

在“ dropdown1”的选择中使用（change）=“ changedVal（$ event.target.value）”。将显示下拉列表中的选定值，现在在类变量中将其分配为“ dropdown1Val”，并在格式2的选项和格式3中使用[attr.disabled] =“ uplink2x === dropdown1Val”

那应该工作！

例如：

<div class="select" formGroupName="uplinksMgmt">
<select formControlName="uplink1" id="uplink1Id" class="selectBox" (change)="changedVal($event.target.value)">
    <option *ngFor="let uplink1x of nicAdapters" [ngValue]="uplink1x">{{uplink1x}}</option>
</select>

Component.ts

public changedVal(val) { 
  this.dropdown1Val = val;
}

对于表格2或表格3

<div class="select" formGroupName="uplinksMgmt">
 <select formControlName="uplink2" id="uplink2Id" class="selectBox">
   <option *ngFor="let uplink2x of nicAdapters" [attr.disabled] = "uplink2x === dropdown1Val" [ngValue]="uplink2x">{{uplink2x}}</option>
</select>

Answer 4

TypeScript：

<table width="100" border="1" style="table-layout:fixed;position:relative;left:75px;"  bordercolor="#E0E0E0">
      <tr bgcolor="#F0F0F0">
          <th width="55px" style="word-wrap:break-word;"><div class="panel-heading">ID</div></th>
          <th width="130px" style="word-wrap:break-word;"><div class="panel-heading">Search Content</div></th>
      </tr>
        <tr>
          {% for i in datas %}
           <td style="word-wrap:break-word;"><div class="panel-body"><small>{{ i.0 }}</small></div></td>
           <td style="word-wrap:break-word;color: #0066CC"><div class="panel-body"><strong><small>{{ i.2 }}</small></strong></div></td>
{% endfor %}
        </tr>
    </table>

HTML

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

public formGroup: FormGroup;
constructor(public fb: FormBuilder) { 
    this.formGroup = this.fb.group({
      store: [{ value:"", disabled: true },[Validators.required, Validators.maxLength(4), Validators.pattern( /[0-9\.]/)]],
    });
 }

// Inside your function.
this.formGroup.controls['store']['enable']();

Angular 6反应形式-选择选项：禁用以前选择的选项

4 个答案: