中动态更改下拉值

中动态更改下拉值

关注
发信
关注(28)粉丝(399)

如何在 Angular 8 中动态更改下拉值?

本文介绍了如何在 Angular 8 中动态更改下拉值?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个下拉列表，它与另一个带有 ID 的下拉列表相关.我想在更改下拉值时动态更改它应该在另一个值中自动更改.在后端，我使用 aspnet 核心并使用服务获取数据.

我的组件看起来像:

 ngOnInit() {this.model.managementId = 1//这也应该是动态的，我不知道如何this.model.mfp = this.getManagementsForProject()this.range = this.getRange()}获取范围(){this.mgmtSerive.getRange(this.model.managementId).subscribe(h => this.range = h)}getManagementsForProject() {this.ms.getManagementsForProject().subscribe(u => this.model.mfp = u);}

我的 html 下拉菜单:

<div class="col-3 mt-3 labelText"><span class="spanText">网络</span>
<div class="col-9"><mat-form-field class="example-full-width"><select matNativeControl required name="managementId"[(ngModel)]="model.managementId"><option value="-1" disabled>--请选择网络--</option><option *ngFor="let item of model.mfp" [ngValue]="item.managementId">{{ item.managementName }}</选项></选择></mat-form-field>

<div class="row"><div class="col-3 mt-3 labelText"><span class="spanText">IP 地址</span>

<div class="col-9"><mat-form-field class="example-full-width"><select matNativeControl required name="ipAddress" [(ngModel)]="model.ipAddress"><option value="-1" disabled>--可用网络--</option><option *ngFor="let item of range">{{ 物品 }}</选项></选择></mat-form-field>

我的后端方法如下:

 [HttpGet("range/{id}")]公共 IActionResult GetRange(int id){var selectedNetworkRange = _context.NetworkRanges.FirstOrDefault(x =>x.ManagementId == id);var vmIpAddresses = _context.VirtualMachines.Select(x => x.IpAddress);if (selectedNetworkRange != null){var cidr = selectedNetworkRange?.Start + "-" + selectedNetworkRange?.End;var cidrRange = IPAddressRange.Parse(cidr).AsEnumerable().Select(adr => adr.ToString());var 结果 = cidrRange.Except(vmIpAddresses).ToList();返回确定(结果)；}return Ok("有些事情失败了");}[HttpGet("项目管理")]公共 IActionResult GetManagementForProject(){var model = from management in _context.Managements选择新的 {ManagementName = management.Name, ManagementId = management.Id};返回确定(模型)；}

当我更改管理下拉列表时，我想动态更新范围下拉列表.我知道我在 ngOnInit 中使用 managemntId = 1 但我不知道如何动态更改.

解决方案

您可以在标签或点击上实现change事件 在标签上.

  1. 改变

您的 html:

 
<mat-form-field class="example-full-width"><select (change)="updateID($event)" matNativeControl required name="managementId"[(ngModel)]="model.managementId"><option value="-1" disabled>--请选择网络--</option><option *ngFor="let item of model.mfp" [ngValue]="item.managementId">{{ item.managementName }}</选项></选择></mat-form-field>

你的 ts:

ngOnInit() {this.model.managementId = 1//这也应该是动态的，我不知道如何this.model.mfp = this.getManagementsForProject()this.range = this.getRange()}更新ID(事件){this.model.managmentId = event.something 可能}获取范围(){this.mgmtSerive.getRange(this.model.managementId).subscribe(h => this.range = h)}getManagementsForProject() {this.ms.getManagementsForProject().subscribe(u => this.model.mfp = u);}

  1. 点击

您的 html:

 
<mat-form-field class="example-full-width"><select matNativeControl required name="managementId"[(ngModel)]="model.managementId"><option value="-1" disabled>--请选择网络--</option><option (click)="updateID(item.managmentId)" *ngFor="let item of model.mfp" [ngValue]="item.managementId">{{ item.managementName }}</选项></选择></mat-form-field>

您的 ts:将与 #1 相同.

I have dropdown which is related another dropdown with ID. I would like to change dynamically when I change dropdown value it should automatically change in another one. In backend I am using aspnet core and getting data using services.

My components looks like: 

   ngOnInit() {
    this.model.managementId = 1    // this should be also dynamic which I don't know how
    this.model.mfp = this.getManagementsForProject()
    this.range = this.getRange()
  }

  getRange() {
    this.mgmtSerive.getRange(this.model.managementId).subscribe(h => this.range = h)
  }

  getManagementsForProject() {
    this.ms.getManagementsForProject().subscribe(u => this.model.mfp = u);
  }

My html dropdowns: 

<div class="row">
      <div class="col-3 mt-3 labelText">
        <span class="spanText">Network</span>
      </div>
      <div class="col-9">
        <mat-form-field class="example-full-width">
          <select matNativeControl required name="managementId"
         [(ngModel)]="model.managementId">
            <option value="-1" disabled>--Please select network--</option>
            <option *ngFor="let item of model.mfp" [ngValue]="item.managementId">
              {{ item.managementName }}
            </option>
          </select>
        </mat-form-field>
      </div>
    </div>




<div class="row">
      <div class="col-3 mt-3 labelText">
        <span class="spanText">IP Address</span>
      </div>
      <div class="col-9">
        <mat-form-field class="example-full-width">
          <select matNativeControl required name="ipAddress" [(ngModel)]="model.ipAddress">
            <option value="-1" disabled>--Available Networks--</option>
            <option *ngFor="let item of range">
              {{ item }}
            </option>
          </select>
        </mat-form-field>
      </div>
    </div>

My backend methods looks like:

        [HttpGet("range/{id}")]
        public IActionResult GetRange(int id)
        {
            var selectedNetworkRange = _context.NetworkRanges.FirstOrDefault(x =>
            x.ManagementId == id);
            var vmIpAddresses = _context.VirtualMachines.Select(x => x.IpAddress);
            if (selectedNetworkRange != null)
            {
                var cidr = selectedNetworkRange?.Start + "-" + selectedNetworkRange?.End;
                var cidrRange = IPAddressRange.Parse(cidr)
                    .AsEnumerable()
                    .Select(adr => adr.ToString());
                var result = cidrRange.Except(vmIpAddresses).ToList();
                return Ok(result);
            }

            return Ok("Something failed");
        }

    [HttpGet("managementforproject")]
    public IActionResult GetManagementForProject()
    {
        var model = from management in _context.Managements
            select new {ManagementName = management.Name, ManagementId = management.Id};
        return Ok(model);
    }

When I change management dropdown I would like dynamically update Range dropdown. I know I am using managemntId = 1 inside ngOnInit but how to change dynamically I don't know.

解决方案

You could implement change event on tag or click on tag.

  1. Change

Your html:

 <div class="col-9">
    <mat-form-field class="example-full-width">
      <select (change)="updateID($event)" matNativeControl required name="managementId"
     [(ngModel)]="model.managementId">
        <option value="-1" disabled>--Please select network--</option>
        <option *ngFor="let item of model.mfp" [ngValue]="item.managementId">
          {{ item.managementName }}
        </option>
      </select>
    </mat-form-field>
  </div>
</div>

Your ts:

ngOnInit() {
    this.model.managementId = 1    // this should be also dynamic which I don't know how
    this.model.mfp = this.getManagementsForProject()
    this.range = this.getRange()
  }

  updateID(event) {
  this.model.managmentId = event.something probably
  }

  getRange() {
    this.mgmtSerive.getRange(this.model.managementId).subscribe(h => this.range = h)
  }

  getManagementsForProject() {
    this.ms.getManagementsForProject().subscribe(u => this.model.mfp = u);
  }

  1. Click

Your html:

 <div class="col-9">
    <mat-form-field class="example-full-width">
      <select matNativeControl required name="managementId"
     [(ngModel)]="model.managementId">
        <option value="-1" disabled>--Please select network--</option>
        <option (click)="updateID(item.managmentId)" *ngFor="let item of model.mfp" [ngValue]="item.managementId">
          {{ item.managementName }}
        </option>
      </select>
    </mat-form-field>
  </div>
</div>

Your ts: would be the same as #1.

这篇关于如何在 Angular 8 中动态更改下拉值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-02 02:40
Powered by LMLPHP ©2024 中动态更改下拉值 0.042103