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

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

一、目标

         每一个版本都对应一个版本号,当选择其中任意一个时,另外一个都会发生变化.

二、搭建 Angular开发环境

前提

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

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

        ① 管理员身份打开cmd 

         

        ② 运行npm install -g @angular/cli

        

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

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

        

         ②运行 ng new myngapp01

        

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

         

          这个地方按一下回车

         

          创建完成

         

 

3.运行项目

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

       

       ②  运行 ng-serve

         

         

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

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

         angular.json:是ng项目的配置文件

        1.main.ts是主入口

        2.index是主页面

                 主页面中有这么个东西 我们看不懂 那就去从主入口中找  

 

        3.查看主入口

                boostrap 是引导启动的意思  

                module 是模块的意思  

                这里是引导启动模块  

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

                Component 是组件的意思

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

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

 

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

 

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

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

四、创建组件

1.组件结构

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

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

         spec 未测试文件 有无皆可

                        ​​​​​      

 2.组件内容     

               

 

 3.注册组件

         在主模块中注册组件

         

 

五、实现功能

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

         用到的方法   typeScript filter         用法如下      

           

        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.完成  

              

 

 六、表单中实现

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

        1.创建表单

                ①引入需要的模块

                   

 

import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';

  imports: [
    FormsModule,
    ReactiveFormsModule,
 
  ],

                ②设置表单

                

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

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

                 ⑤最终

                

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

 

 

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值