Trung tâm cá nhân
sách gpt4 ăn đã đi

angular - 如何在 TypeScript 中同步下拉菜单？

In lại 作者：搜寻专家 更新时间：2023-10-30 21:44:30 26 4
mua khóa gpt4 giày nike

我的页面上有 5 个动态下拉菜单。我希望他们所有人都能彼此同步。假设如果我在 dropdown1 中选择值 1，那么在其他下拉列表中，即 2、3、4 和 5，值 1 应该隐藏。如果我在下一个下拉列表中选择了值 2，那么值 1 和 2 应该隐藏在其他下拉列表中，除了我选择它的下拉列表等等。我必须使用 Angular 8 在 typeScript 中编写这段代码。

我尝试了下面的代码，但它没有按预期工作。在这段代码中，如果我从下拉列表 1 中选择值 1，它将正常工作，但如果我从下拉列表 2 中选择值 2，则值 1 也会出现在其他下拉列表中在我的情况下不应该发生。

  public _values1 = ["1", "2", "3", "4", "5"]; //These are values for dropdown
  public _values2 = ["1", "2", "3", "4", "5"]; //These are values for dropdown
  public _values3 = ["1", "2", "3", "4", "5"]; //These are values for dropdown 
  public _values4 = ["1", "2", "3", "4", "5"]; //These are values for dropdown
  public _values5 = ["1", "2", "3", "4", "5"]; //These are values for dropdown

  onChange1(e){ //This is function for 1st dropdown
    const val = e.target.value;
    if (val == 1){
    this._values2 = ["2", "3", "4", "5"];
    this._values3 = ["2", "3", "4", "5"];
    this._values4 = ["2", "3", "4", "5"];
    this._values5 = ["2", "3", "4", "5"];
    }
    if (val == 2){
      this._values2 = ["1", "3", "4", "5"];
      this._values3 = ["1", "3", "4", "5"];
      this._values4 = ["1", "3", "4", "5"];
      this._values5 = ["1", "3", "4", "5"];
    }
    if (val == 3){
      this._values2 = ["1", "2", "4", "5"];
      this._values3 = ["1", "2", "4", "5"];
      this._values4 = ["1", "2", "4", "5"];
      this._values5 = ["1", "2", "4", "5"];
    }
    if (val == 4){
      this._values2 = ["1", "2", "3", "5"];
      this._values3 = ["1", "2", "3", "5"];
      this._values4 = ["1", "2", "3", "5"];
      this._values5 = ["1", "2", "3", "5"];
    }
    if (val == 5){
      this._values2 = ["1", "2", "3", "4"];
      this._values3 = ["1", "2", "3", "4"];
      this._values4 = ["1", "2", "3", "4"];
      this._values5 = ["1", "2", "3", "4"];
    }
  };

我正在像这样将条件写入下拉值，但正如您所见，下拉列表中的所有值都会随着每次函数运行而发生变化。这与下拉菜单 2 的功能相同。以下是 HTML 代码:-

vân vân……

câu trả lời hay nhất

在这里你可以使用ng-container来解决你的问题。

在您的.html 文件中，代码应该是，

trong của bạn.ts 文件中

 //declare this in the global .
  public _values1 = ["1", "2", "3", "4", "5"]; //These are values for dropdown
  public _values2 = ["1", "2", "3", "4", "5"]; //These are values for dropdown
  public _values3 = ["1", "2", "3", "4", "5"]; //These are values for dropdown 
  public _values4 = ["1", "2", "3", "4", "5"]; //These are values for dropdown
  public _values5 = ["1", "2", "3", "4", "5"]; //These are values for dropdown

    //declare this in the global .
    selectedValue1 ;
    selectedValue2 ;
    selectedValue3 ;
    selectedValue4 ;
    selectedValue5 ;


    //make the function for each select option 
    onChange1(e){ //This is function for 1st dropdown
    const val = e.target.value;
    console.log(val);
    this.selectedValue1 = val;

  };
  onChange2(e){ //This is function for 2nd dropdown
    const val = e.target.value;
    console.log(val);
    this.selectedValue2 = val;

  };
  onChange3(e){ //This is function for 3rd dropdown
    const val = e.target.value;
    console.log(val);
    this.selectedValue3 = val;
  };
  onChange4(e){ //This is function for 4th dropdown
    const val = e.target.value;
    console.log(val);
    this.selectedValue4 = val;
  };
  onChange5(e){ //This is function for 5th dropdown
    const val = e.target.value;
    console.log(val);
    this.selectedValue5 = val;
  };

关于angular - 如何在 TypeScript 中同步下拉菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57864674/

26 4 0
Đề xuất bài viết: java - JSP 表达式语言获取参数
Đề xuất bài viết: sql - 练习数据库查询 (sql/tsql)
Đề xuất bài viết: java - Java 8 中函数类型全等 lambda 表达式的使用
Đề xuất bài viết: 主写和从读的数据库复制滞后(延迟)
搜寻专家
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress