Angular - 添加选项以选择按钮单击 [英] Angular - add option to select on button click

问题描述

在我当前的Angular页面上，我有一个选择下拉列表，该下拉列表使用当前为客户端存在的地址自动填充，最终选项为添加新地址。单击此按钮时，将显示一个模式窗口，可在其中输入新地址。当地址被保存时，它应该被添加到下拉列表并默认选中。



我在网上搜索但是找不到任何有用的东西。任何指导都将不胜感激。



提前致谢。



我尝试了什么：

On my current Angular page I have a select dropdown which is autopopulated with addresses that currently exists for a client, with the final option being "Add New Address". When this is clicked, a modal window is shown where a new address can be entered. When the address is saved it should be added to the dropdown and selected by default.

I've searched online but haven't been able to find anything that worked. Any guidance would be greatly appreciated.

Thanks in advance.

What I have tried:

Currently this is the method that is executed when the new address is saved:
<pre lang="Javascript">addressSubmitted(form: FormGroup) {
    if(form.valid){
      var addressLine1 = form.controls['address'].value;
      var addressLine2 = form.controls['address2'].value;
      addressLine2 = addressLine2.trim();
      var city = form.controls['city'].value;
      var stateId = form.controls['state'].value;
      var state = this.SelectedState; //form.controls['state'].find()
      var postalCode = form.controls['zip'].value;

      var fullAddress = addressLine1 + ', ';
      if('' != addressLine2){
        fullAddress = fullAddress + addressLine2 + ', ';
      }
      fullAddress = fullAddress + city + ', ' + state + ' ' + postalCode
      -->this.popupForm.controls['address_select'].xxxx;
    }
    else{
      this.servicePNotify.error("Error","New address information is not complete");
      this.service.validateAllFormFields(form);
    }

popupForm 表单中的下拉列表名为 address_select 并且是应该添加新地址的控件。

The dropdown in the popupForm form is named address_select and is the control that should have the new address added.

推荐答案

您的地址列表应该是代码中存在的集合。它需要双向绑定。然后，您可以将新项目添加到集合中，它将重新绑定并显示它。您没有发布模板，是否有办法设置所选项目？这也应该是一个变量，然后您可以在打字稿代码中进行更改。

Your list of addresses should be a collection that exists in code. It would need two way binding. You can then add the new item to the collection and it will rebind and show it. You didn't post your template, does it have a way to set the selected item? This should also be a variable you can then change in your typescript code.

这篇关于Angular - 添加选项以选择按钮单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！