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

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

我的组件看起来像:

   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);
  }

我的html下拉列表:

<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>

我的后端方法如下:

        [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);
    }

当我更改管理下拉菜单时,我想动态更新范围下拉菜单。我知道我在ngOnInit中使用managemntId = 1,但是我不知道如何动态更改。

参考方案

您可以在标签上实现更改事件或单击标签。

更改

您的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>

您的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);
  }

请点击

您的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>

您的ts:与#1相同。

将Web用户控件添加到页面时,asp按钮onclick不会触发 - javascript

我正在使用使用Visual Studio模板创建的Web表单应用程序。模板具有一个内容占位符,该占位符被访问的任何页面的内容替换。有问题的页面有几个服务器控件,例如文本框,标签和按钮。当我单击我的更新按钮时,它可以正常工作,这些值会回传并更新数据库。我想在所有子页面上创建通用的登录提示。我的导航栏(位于我的母版页中)具有引导程序设置。我在导航栏中添加了一个下…

Telerik单选按钮所需的字段验证器 - javascript

如何设置Telerik单选按钮所需的字段验证器?我想在按钮单击“ BtnSave”上设置必填字段验证器吗?请帮忙!<telerik:RadButton ID="radio_male" runat="server" ToggleType="Radio" AutoPostBack="fa…

用symfony隐藏树枝中的表格行 - javascript

我正在开始编码。我正在使用Symfony 3.3我想用复选框隐藏(并显示)表上的a或某些特定行。我尝试使用javascript和jquery。我希望隐藏的行保持隐藏状态。我不知道该怎么做。这是我的树枝{% block body %} <div class="container"> <h3>List of produ…

表单不提交或按钮提交不起作用 - javascript

据我所知,此代码必须有效,但是我编码时却无效问题在于该表单未提交。我该如何解决?选中时,我什至没有得到复选框的值。<table id="example" class="display" cellspacing="0" width="100%"> <thead&g…

在PHP文件中调用javascript函数并在加载HTML文件之后? - javascript

我需要在我的php中调用js函数,但无法正常工作。有人可以告诉我我在做什么错吗?我该如何轻松地做到这一点?谢谢!我有三个文件:  mail.php负责发送$ _POST的内容(工作正常)。我调用我的javascript函数来切换模式,具体取决于邮件是否已发送。 <? ... $response = $sendgrid->send($email);…