html - 当我在同一行中使用 mat-input 和 mat-field 并添加 mat-chip 时,这两个字段不会保留在同一行
问题描述
我在同一行中有两个三个输入。前两个是mat-input,第三个是mat-chip,都在同一行。当我添加 mat-chip 时,该字段会下降,并且前两个字段的对齐不会保持不变,在一行中。
我的代码是这样的。
<mat-card-content *ngIf="addProductForm.controls['is_product_variant'].value == 1">
<div formArrayName="variants" class="bottomMargin fancyscroll" style="overflow-x: hidden; overflow-y: auto; height:120px;">
<div *ngFor="let unitproductVariants of addProductForm.controls.variants.controls; let i=index">
<div [formGroupName]="i">
<div fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="1%" fxLayoutAlign="center">
<div fxFlex="20">
<mat-form-field fxFlex="100%">
<mat-label>Variant SKU<span *ngIf="i == 0">*</span></mat-label>
<input matInput placeholder="Variant SKU" formControlName="variant_sku" autocomplete="off">
<mat-error *ngIf="unitproductVariants.controls['variant_sku'].hasError('required')">
Please enter sku</mat-error>
</mat-form-field>
</div>
<div fxFlex="25">
<mat-form-field fxFlex="100%">
<mat-label>Variant Name<span *ngIf="i == 0">*</span></mat-label>
<input matInput placeholder="Variant Name" formControlName="variant_name" autocomplete="off">
<mat-error *ngIf="unitproductVariants.controls['variant_name'].hasError('required')">
Please enter name</mat-error>
</mat-form-field>
</div>
<div fxFlex="55">
<mat-form-field class="example-full-width" fxFlex="100%">
<mat-chip-list #barcodeList>
<mat-chip *ngFor="let item of unitproductVariants?.controls?.barcode?.value" [selectable]="selectable" [removable]="removable" (removed)="removeBarcode(item,i)">
{{item}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input placeholder="Enter Barcodes" class="margin-zero" [matChipInputFor]="barcodeList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur" (matChipInputTokenEnd)="addBarcode($event,i)" formControlName="barcodes" autocomplete="off">
<mat-icon matSuffix class="auto_icon" (click)="auto_generate_barcode(i)">text_format</mat-icon>
</mat-chip-list>
</mat-form-field>
</div>
<!-- <div fxFlex="5">
<button type="button" mat-button color="primary" class="cancel-button" (click)="auto_generate_barcode(i)">Auto</button>
</div> -->
<!-- delete button -->
<div fxFlex="5" fxLayoutAlign="center">
<button class="marginTop" *ngIf="addProductForm.controls.variants.controls.length > 1 && i!=0" mat-icon-button (click)="removeUnit(i)">
<mat-icon>delete</mat-icon>
</button>
</div>
<!-- delete button -->
</div>
<!-- <div fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="3.5%" fxLayoutAlign="center">
<div fxFlex="90%">
<mat-form-field class="example-full-width" fxFlex="100">
<mat-chip-list #barcodeList>
<mat-chip *ngFor="let item of unitproductVariants?.controls?.barcode?.value"
[selectable]="selectable" [removable]="removable" (removed)="removeBarcode(item,i)">
{{item}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input placeholder="Enter Barcodes" class="margin-zero" [matChipInputFor]="barcodeList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="addBarcode($event,i)" formControlName="barcodes"
autocomplete="off">
</mat-chip-list>
</mat-form-field>
</div>
<div fxFlex="10%">
<button type="button" mat-button color="primary" class="cancel-button" (click)="auto_generate_barcode(i)">Auto</button>
</div>
</div> -->
</div>
</div>
</div>
</mat-card-content>
解决方案
推荐阅读
- azure-language-understanding - LUIS 用户话语背后的感叹号
- typescript - 将 Jest 与 gRPC-Web 一起使用
- javascript - 获取多对字符串之间的字符串,即HTML标签
- c# - 我可以在 ASP.Net Core 3.0 中使用 IEmailSender 接口向多个收件人发送电子邮件吗
- amazon-web-services - 使用 CDK 写入 S3 对象
- wordpress - 频繁停止应用程序池 [IIS with Wordpress]
- c# - 如何在文档内的 XML 中添加一个名称空间和另一个带有前缀的名称空间
- tensorflow - 如何将图像作为 keras python 的数据集
- php - 亲子顺序 ORM DOCTRINE
- java - 使用 Jmeter 进行 Cassandra 测试