我想创建一个输入框，输入的字符串长度变化时，该输入框至少在宽度上动态扩展，甚至可以支持多行输入。
在Angular Material 2中，使用input元素是否可以实现这个功能？
使用Angular Material 2中的textarea字段，我只能通过以下代码扩展文本框的高度，无法扩展其宽度：
<mat-form-field (keydown.enter)="onEnter()"
floatPlaceholder="never">
<textarea matInput
placeholder="Autosize textarea"
matTextareaAutosize
matAutosizeMinRows="1"
matAutosizeMaxRows="8">
</textarea>
</mat-form-field>
简单且唯一的模板解决方案：
<mat-form-field
[ngStyle]="{'width.ch': inputText.value.length, 'min-width.ch': 10}">
<input #inputText matInput>
</mat-form-field>
您可以使用ngStyle将mat-form-field的宽度绑定到一个计算出的值，并使用输入事件在输入时设置该值。例如，这里有一个输入框，它的宽度跟随文本宽度超过64px：
<mat-form-field [ngStyle]="{'width.px': width}">
<input #elasticInput matInput (input)="resize()">
</mat-form-field>
<span #hiddenText style="visibility: hidden; white-space: pre;">{{elasticInput.value}}</span>
export class InputTextWidthExample {
@ViewChild('hiddenText') textEl: ElementRef;
minWidth: number = 64;
width: number = this.minWidth;
resize() {
setTimeout(() => this.width = Math.max(this.minWidth, this.textEl.nativeElement.offsetWidth));
}
}
keyup 改成了 keydown。这样流畅度会更好一些。单位 ch 表示字符 0 的宽度。https://developer.mozilla.org/en-US/docs/Web/CSS/length。也许没有别的办法除了用 JS 来测量宽度... - Night Trainmin-width: 30vw; width: 30vw; max-width: 98vw; text-align: center; 但这样更好！！ - Night Train我需要在mat-table（动态大小）中为matInput提供动态宽度，并尝试了几种基于G.Tranter的解决方案的方法。然而，根据呈现的表格单元格数量查看动态数量的<span>元素是不切实际的。因此，我想出了一个相当实用的解决方案：
每当数据更新时，我创建一个<span>元素，将其填充为更新后的数据，将其添加到HTML body（或我的情况下的div），提取<span>的offsetWidth并立即从HTML文档中删除它。在测试过程中，我没有观察到任何闪烁或渲染问题（虽然我认为这是可能的）。
模板
...
<!-- col1 Column -->
<ng-container matColumnDef="col1">
<th *matHeaderCellDef mat-header-cell mat-sort-header scope="col"> ifPattern</th>
<td *matCellDef="let dataRecord;" mat-cell>
<mat-form-field [ngStyle]="{'width.px': columnWidth[0]}" floatLabel="never">
<input (input)="resize(0, dataRecord.col1)" [(ngModel)]="dataRecord.col1"
[value]="dataRecord.col1" matInput placeholder="col1 value">
</mat-form-field>
</td>
</ng-container>
...
调整大小方法
displayedColumns: string[] = ["col1", "col2", "col3"];
minWidth: number = 64; // pixel
columnWidth: number[] = [this.minWidth, this.minWidth, this.minWidth];
resize(column_index: number, value: string) {
setTimeout(() => {
let span = document.createElement('span');
span.innerText = value;
let div = document.getElementById('case-cleaning-overview')
div?.append(span);
this.columnWidth[column_index] = Math.max(this.minWidth, span.offsetWidth);
div?.removeChild(span);
});
}
input，最终得出了以下结果。
我还添加了一些支持字符串剪切和粘贴的场景。
这里是在StackBlitz上的演示以及相应的代码:
模板:
<style>
#invisibleTextID {
white-space: pre;
}
// prevents flickering:
::ng-deep .mat-form-field-flex {
width: 102% !important;
}
</style>
<mat-form-field
#formFieldInput
[ngStyle]="{'width.px': width}">
<input
#inputText
id="inputTextID"
matInput
[(ngModel)]="inString"
(paste)="resizeInput()"
(cut)="resizeInput()"
(input)="resizeInput()">
</mat-form-field>
<span #invisibleText id="invisibleTextID">{{ inString }}</span>
调整大小方法：
@ViewChild('invisibleText') invTextER: ElementRef;
inString: string = '';
width: number = 64;
resizeInput() {
// without setTimeout the width gets updated to the previous length
setTimeout ( () =>{
const minWidth = 64;
if (this.invTextER.nativeElement.offsetWidth > minWidth) {
this.width = this.invTextER.nativeElement.offsetWidth + 2;
} else {
this.width = minWidth;
}
}, 0)
}
textarea的高度。 - Night Train