nzForm 布局被打乱nz-form 布局被打乱的原因表单样式使用行内：[nzLayout]="'inline'"表单中使用多中类型的控件（input、datepicker、select...）会出现日期选择控件没有充满，同时 select 控件会被挤到下一行，看看下面的效果 使用官方的样式类设置统一宽度解决在模板对应的CSS中使用下面的样式设置统一宽度 /* 通过设置下面两个样式的宽度解决 nz-select 打乱 form 布局的问题*//* nz-form-control 外围类 */.ant-form-item-control-wrapper{ width: 152.16px;}/* nz-form-item 样式类*/.ant-form-item{ width: 221.2px;}设置后的效果是：其他解决方法实际不该使用inline模式，而应该使用horizontal模式，一个 nz-form-item 中放置4个 label 和 control因为一个 nz-form-item 是一行
zorro tag 实现编辑状态、连续新增先看实现效果官网给的示例只有新增、删除，并且不可连续新增。自己制作实现这两个状态。下面直接贴代码了模板中代码：<span *ngFor=“let tag of tags;let i=index;"> <nz-tag *ngIf=“tag.visible” [nzMode]=“i === -1 ? ‘default’ : ‘closeable’” (nzAfterClose)=“handleClose(tag)” (click)=“showInputInArray(tag)” (nzOnClose)=“onCloseTagInArray()"> <span style=“font-size:1.2em;">{{ sliceTagName(tag.text) }}</span> </nz-tag> <input #inputElementInArray *ngIf="!tag.visible” type=“text” nz-input nzSize=‘small’ style=“width:78px;” [(ngModel)]=“tag.text” (blur)=“handleInputConfirmInArray(tag)” (keydown.enter)=“handleInputConfirmInArray(tag)"></span><nz-tag *ngIf="!inputVisible” class=“editable-tag” (click)=“showInput()"> <i nz-icon type=“plus”></i> <span style=“font-size:1.2em;">点我新增</span></nz-tag><input #inputElement nz-input nzSize=“small” *ngIf=“inputVisible” type=“text” [(ngModel)]=“inputValue” style=“width: 78px;” (blur)=“handleInputConfirm()” (keydown.enter)=“handleInputConfirm()">CSS代码.editable-tag ::ng-deep .ant-tag { background: rgb(255, 255, 255); border-style: dashed;}ts代码import { Component, OnInit, ViewChild, ElementRef } from ‘@angular/core’;import { NzMessageService } from ’ng-zorro-antd’;@Component({ selector: ‘app-tag-edit’, templateUrl: ‘./tag-edit.component.html’, styleUrls: [’./tag-edit.component.css’]})export class TagEditComponent implements OnInit { private tag01:CcTag = new CcTag(); private tag02:CcTag = new CcTag(); private tag03:CcTag = new CcTag(); private tags:CcTag[] = []; private skipClick:boolean = false; private newOngoing:boolean = true; inputVisible = false; inputValue = ‘’; @ViewChild(‘inputElement’) inputElement: ElementRef; @ViewChild(‘inputElementInArray’) inputElementInArray: ElementRef; //#region 系统生命周期钩子 constructor( private msg:NzMessageService ) { } ngOnInit() { this.initTags(); } //#endregion //#region 初始化数据 initTags(){ this.tag01.text=‘单袋’; this.tag01.value=‘单袋’; this.tag01.visible=true; this.tag02.text=‘双袋’; this.tag02.value=‘双袋’; this.tag02.visible=true; this.tag03.text=‘编织袋’; this.tag03.value=‘编织袋’; this.tag03.visible=true; this.tags.push(this.tag01); this.tags.push(this.tag02); this.tags.push(this.tag03); } //#endregion handleClose(removedTag: {}): void { this.tags = this.tags.filter(tag => tag !== removedTag); } sliceTagName(tag: string): string { const isLongTag = tag.length > 20; return isLongTag ? ${tag.slice(0, 20)}... : tag; } showInput(): void { this.inputVisible = true; setTimeout(() => { this.inputElement.nativeElement.focus(); }, 10); } // 数组反应到UI上的input showInputInArray(tag:CcTag){ if(this.skipClick){ this.skipClick = false; return; } tag.visible=false; setTimeout(() => { this.inputElementInArray.nativeElement.focus(); }, 10); } handleInputConfirmInArray(tag:CcTag){ tag.visible=true; } handleInputConfirm(): void { var target:CcTag = new CcTag(); target.text=this.inputValue; target.value=this.inputValue; target.visible=true; if (this.inputValue && this.tags.indexOf(target) === -1) { this.tags.push(target); this.inputValue=’’; this.showInput(); }else{ this.inputValue = ‘’; this.inputVisible = false; } } onCloseTagInArray(){ this.skipClick = true; }}export class CcTag{ public text:string; public value:string; public visible:boolean; } ...