Angular中nz-select实现两个选择框互相关联

红太狼 2024-04-20 22:05 58阅读 0赞

## 为了梳理自己学过的知识 我会从创建项目开始 如果熟悉的 可以直接跳到 五 查看功能实现 ##

## 一、目标 ##

每一个版本都对应一个版本号,当选择其中任意一个时,另外一个都会发生变化.![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_15_color_FFFFFF_t_70_g_se_x_16][]

## 二、搭建 Angular开发环境 ##

### 前提 ###

已经安装好 node.js 和npm,未安装好 请百度 这里不再赘述

### 1.下载并安装脚手架工具 ###

① 管理员身份打开cmd

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_13_color_FFFFFF_t_70_g_se_x_16][]

② 运行npm install -g @angular/cli

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_16_color_FFFFFF_t_70_g_se_x_16][]

### 2.运行脚手架工具创建空白项目 ###

① 进入到你想要创建项目的位置

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_16_color_FFFFFF_t_70_g_se_x_16 1][]

②运行 ng new myngapp01

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_16_color_FFFFFF_t_70_g_se_x_16 2][]

③选择 你要使用的样式语言

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_16_color_FFFFFF_t_70_g_se_x_16 3][]

这个地方按一下回车

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_16_color_FFFFFF_t_70_g_se_x_16 4][]

创建完成

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_16_color_FFFFFF_t_70_g_se_x_16 5][]

### 3.运行项目 ###

①这里我是将项目添加到了 VScode编辑器里面

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_6_color_FFFFFF_t_70_g_se_x_16][]

② 运行 ng-serve

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_14_color_FFFFFF_t_70_g_se_x_16][]

③ 进行查看 [http://localhost:4200/][http_localhost_4200] 如下即为创建成功

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_20_color_FFFFFF_t_70_g_se_x_16][]

## 三、简单介绍(如有不对,请各位大佬指出) ##

> ### angular.json:是ng项目的配置文件![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_19_color_FFFFFF_t_70_g_se_x_16][] ###

### 1.main.ts是主入口 ###

### 2.index是主页面 ###

主页面中有这么个东西 我们看不懂 那就去从主入口中找 ![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

### 3.查看主入口 ###

boostrap 是引导启动的意思

module 是模块的意思

这里是引导启动模块

它引导启动了AppModule模块 AppModule 从上面可以看出 是从app/app.module 中引入的

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_19_color_FFFFFF_t_70_g_se_x_16 1][]

Component 是组件的意思

在这里他用引导启动了 AppComponent组件

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_18_color_FFFFFF_t_70_g_se_x_16][] selector就是css选择器，表示这个组件可以通过app-root来调用，index.html中有个<app-root>Loading...</app-root>标签，这个标签用来展示该组件的内容  
templateUrl 组件的模板，定义了组件的布局和内容  
tyleUrls 该模板引用那个css样式

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_17_color_FFFFFF_t_70_g_se_x_16][]

在这里我们就看到了我们主页的内容了

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_15_color_FFFFFF_t_70_g_se_x_16 1][]

这也就是Angualr项目中的模块化思维

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_5_color_FFFFFF_t_70_g_se_x_16][]

> 了解了这些 我们就开始创建我们的组件

## 四、创建组件 ##

### 1.组件结构 ###

为了使项目方便查看 在创建组件前 我们一般都创建一个文件夹

为了方便识别我们一般在相同模块中的主键前面添加一个相同的名字

spec 未测试文件 有无皆可

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_5_color_FFFFFF_t_70_g_se_x_16 1][]

### 2.组件内容 ###

### ![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_20_color_FFFFFF_t_70_g_se_x_16 2][] ###

### 3.注册组件 ###

在主模块中注册组件

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_18_color_FFFFFF_t_70_g_se_x_16 1][]

## 五、实现功能 ##

用到的网站 阿里云组件库 [ NG-ZORRO - 企业级 UI 设计语言和 Angular 组件库][NG-ZORRO - _ UI _ Angular] 使用前需要进行配置 这个页面 快速上手那里 照着做就好 这里不再赘述

用到的方法 typeScript filter 用法如下

![70][]

### 1.HTML代码 ###

<nz-select 
          [(ngModel)]="selectStringVersion"   
          (ngModelChange)="change(1)"        
          nzPlaceHolder="Choose" 
        >
          <nz-option *ngFor="let temp of versionList" [nzValue]="temp.stringVersion" [nzLabel]="temp.stringVersion"></nz-option>
    </nz-select>
    <br>
    
    
    <nz-select
          [(ngModel)]="selectStringVersion"
          (ngModelChange)="change(2)"
          nzPlaceHolder="Choose"
        >
          <nz-option *ngFor="let temp of versionList" [nzValue]="temp.intVersion" [nzLabel]="temp.intVersion"></nz-option>
    </nz-select>

### 2.TS中代码 ###

import { Component } from "@angular/core";
    /**
     * 用装饰器定义了一个组件以及组件的元数据,组件必须使用这个装饰器 Component
     */
    @Component({
        //css选择器  
        selector:'app-select',
        //组件的模板
        templateUrl:'./app-select.component.html',
        //组件的样式 可以有多个
        styleUrls:['./app-select.component.css']
    })
        
    
    export class AppSelectCompoent{
        //测试数据 实际项目应该为数据库数据
        versionList=[
            {stringVersion:'v1.0',intVersion:1},
            {stringVersion:'v2.0',intVersion:2},
            {stringVersion:'v3.0',intVersion:3},
            {stringVersion:'v4.0',intVersion:4},
        ]
        //双向数据绑定变量
        selectStringVersion
        selectIntVersion
    
        change(a){
            if(a==1){this.selectIntVersion=this.versionList.filter
                (item=>item.stringVersion==this.selectStringVersion)
                [0].intVersion}    //这里0是因为 它前面得到的是一个数组 我们调取第一个数组元素即可
            if(a==2){
                this.selectStringVersion=this.versionList.filter
                (item=>item.intVersion==this.selectIntVersion)
                [0].stringVersion
            }
            console.log(this.selectIntVersion,this.selectStringVersion)
        }
    
    }

### 3.完成 ###

![b1c0fc58d5834d188befaca99ac40a94.gif][]

## 六、表单中实现 ##

虽然上面实现了我们的功能,但在项目中这些选择框有时候在表单中 那在表单中如何实现 基本上也差不多

### 1.创建表单 ###

①引入需要的模块

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

import { FormsModule } from '@angular/forms';
    import { ReactiveFormsModule } from '@angular/forms';
    
      imports: [
        FormsModule,
        ReactiveFormsModule,
     
      ],

②设置表单

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_19_color_FFFFFF_t_70_g_se_x_16 2][]

appForm:FormGroup        //表单声明
    //这里，每个控件名对应的值都是一个数组，这个数组中的第一项是其初始值。你可以只使用初始值来定义控
    //件，但是如果你的控件还需要同步或异步验证器，那就在这个数组中的第二项和第三项提供同步和异步验证器。
        constructor(private fb:FormBuilder){
            this.appForm=this.fb.group({
                intVersion:[null],        
                stringVersion:[null],
            })
        }
    
        appModel = {              
            isVisible: false,          //是否显示
            title: '',                 //标题
            saveLoading: false,
          }

③HTML

<nz-modal
      [(nzVisible)]="appModel.isVisible"
      [nzTitle]="appModel.title"
      (nzOnCancel)="appModel.isVisible = !appModel.isVisible"
      [nzOkLoading]="appModel.saveLoading"
      [nzOkDisabled]="!appForm.valid"
      nzMaskClosable="false"
      nzWidth="1000"
      [nzContent]="Content">>
    </nz-modal>
    <button (click)="open('修改')">打开表单</button>
    
    <ng-template #Content>
        <form nz-form [formGroup]="appForm">
    <nz-select 
          [(ngModel)]="selectStringVersion"   
          (ngModelChange)="change(1)"    
          nzPlaceHolder="Choose" 
          formControlName='currentStringVersion'   //绑定
        >
          <nz-option *ngFor="let temp of versionList" [nzValue]="temp.stringVersion" [nzLabel]="temp.stringVersion"></nz-option>
    </nz-select>
    <br>
    <nz-select
          [(ngModel)]="selectIntVersion"
          (ngModelChange)="change(2)"
          nzPlaceHolder="Choose"
          formControlName="currentIntVersion"      //绑定
        >
          <nz-option *ngFor="let temp of versionList" [nzValue]="temp.intVersion" [nzLabel]="temp.intVersion"></nz-option>
    </nz-select>
    </form>
    </ng-template>

④TS中修改

当我们把这里改成 表单绑定的值的时候 会出现一些状况

change(a) {
        if (a == 1) {
          this.appForm.value.currentIntVersion= this.versionList.filter(item => item.stringVersion == this.selectStringVersion)[0].intVersion
        }
        if (a == 2) {
          this.appForm.value.currentStringVersion = this.versionList.filter(item => item.intVersion == this.selectIntVersion)[0].stringVersion
        }
        console.log( this.appForm.value.currentIntVersion ,this.appForm.value.currentStringVersion)
      }

表单中的值发生了变化 但是选择框不变 所以 将上述值 改回 即可实现 实时刷新

![c2ce237ada7248be93e5a0a5703f74eb.gif][]

⑤最终

change(a) {
        if (a == 1) {
          this.selectIntVersion = this.versionList.filter(item => item.stringVersion == this.selectStringVersion)[0].intVersion
        }
        if (a == 2) {
          this.selectStringVersion = this.versionList.filter(item => item.intVersion == this.selectIntVersion)[0].stringVersion
        }
        console.log(this.selectIntVersion, this.selectStringVersion)
      }

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_15_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/a2587027850c4dae92c923cf925ae0ac.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_13_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/0d9a590af2864f4495cbff86443fe012.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_16_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/ba045a765e674d04bdfa5cd82a8ec685.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_16_color_FFFFFF_t_70_g_se_x_16 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/5bec69ed6bdd434280cfeb2e6f7a5a89.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_16_color_FFFFFF_t_70_g_se_x_16 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/84fb7331556a478f920ae4ca8d54e258.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_16_color_FFFFFF_t_70_g_se_x_16 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/c1dbb6d0d9114f45856ec95889bbbcda.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_16_color_FFFFFF_t_70_g_se_x_16 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/99b5ff297f4b4fd49e452b7936d5ac74.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_16_color_FFFFFF_t_70_g_se_x_16 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/3f99c1dfe8ea4bb89ac56d1c7b10cc18.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_6_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/74d35423ccfa49abaf08bfd2103da067.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_14_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/816fbd4e5fb745958c2f17a58c7b3c53.png
[http_localhost_4200]: http://localhost:4200/
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_20_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/b77f59f446c94b87b6aa4c720a8ee23d.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_19_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/4fe4eeacad6e441189140e9b5f3f85f4.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/ef6fa61d8e5e452fb02b8841ef09f07d.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_19_color_FFFFFF_t_70_g_se_x_16 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/58f554d36c544241b08b02355a83f69e.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_18_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/9378492c8dc545748147fd4a11919f0c.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_17_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/ea91565e30d94f1ca05256826818cfff.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_15_color_FFFFFF_t_70_g_se_x_16 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/37de70ba556445f9ba5b87d8cf2dc348.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_5_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/e46e24d77cff47a587fa6f09f54e1c8e.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_5_color_FFFFFF_t_70_g_se_x_16 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/c8e6579242e14cc78f86558bc30075a0.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/45a0acdbf07b4f4fa46e5f4db4f10e6c.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_18_color_FFFFFF_t_70_g_se_x_16 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/ce05726af0c847ec8de2ef30ec507cc9.png
[NG-ZORRO - _ UI _ Angular]: https://ng.ant.design/docs/introduce/zh
[70]: https://img-blog.csdn.net/2018060218543844?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODgwODMzMw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[b1c0fc58d5834d188befaca99ac40a94.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/d9c195f14e2743d6867b0cfe928650d5.gif
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/629ccc4e627e423f9667bea19983df79.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_19_color_FFFFFF_t_70_g_se_x_16 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/edf330ea00994498b01f38ae4d811d69.png
[c2ce237ada7248be93e5a0a5703f74eb.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/5891fd9490c94e7788aadd706d902892.gif
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA57q15pyJ55a-6aOO6LW3ICAg5Lq655Sf5LiN6KiA5byD_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/4c376ffd4a7f4e7c9a21f21ddeb0146e.png