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

最新推荐文章于 2023-04-13 15:35:26 发布

纵有疾风起人生不言弃

最新推荐文章于 2023-04-13 15:35:26 发布

阅读量2.4k

点赞数

分类专栏：笔记 Angular 文章标签： angular.js 前端 angular

本文链接：https://blog.csdn.net/m0_51935008/article/details/122678894

版权

笔记同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

Angular

2 篇文章 0 订阅

订阅专栏

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

一、目标

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

二、搭建 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)
  }