這是我的 HTML 模板。
<div
cdkDropList
class="document-columns__list list"
(cdkDropListDropped)="dragDrop($event)"
>
<div
cdkDrag
class="list__box"
*ngFor="let column of columns; let i = index"
(click)="selectColumn(column)"
[class.list__box_selected]="column === selectedColumn"
>
<div class="list__placeholder" *cdkDragPlaceholder></div>
<div class="list__content">
<div class="list__name">
{{column.col_num}}. {{column.title}}
</div>
<div class="list__type">
{{getType(column)?.title}}
</div>
</div>
<p-button
class="list__button"
icon="pi pi-trash"
styleClass="p-button-danger p-button-outlined"
[disabled]="columns.length === 1"
(click)="deleteColumn(column)"
></p-button>
</div>
</div>
<div class="document-columns__button">
<p-button
styleClass="p-button-secondary p-button-outlined"
(click)="addNewColumn()"
label="Add column"
icon="pi pi-plus"
iconPos="left"
>
</p-button>
</div>
這是我的 TS 代碼。
public addNewColumn(): void {
const arrayLength: number = this.columns.length 1;
this.columns.push({
col_num: arrayLength,
type_id: TypeId.Number,
title: 'New Column',
});
this.columnsChanged.emit(this.columns);
this.recalculateColumnNumbers();
}
當我單擊添加列按鈕時。在陣列中創建一個新元素。模板將使用新元素重新繪制。之后我想專注于它。怎么做？我試過這段代碼，但它不起作用。
document.querySelectorAll('.document-columns__list:last-child').focus();
uj5u.com熱心網友回復：
您可以只關注您在addNewColumn方法中添加的最后一個元素。您只需要等到dom中呈現的元素即可。因此，在下面的示例中，我只是使用setTimeout
始終建議使用角度方式來查詢 html 元素來推遲焦點操作。所以我只使用了ViewChildren裝飾器。
@ViewChildren('element', { read: ElementRef }) elements: QueryList<ElementRef>;
public addNewColumn(): void {
....
setTimeout(() =>
this.elements.last.nativeElement.focus()
);
}
在您的模板中，您應該只在要關注的元素上放置一個模板變數#element 以允許組件類訪問它。
<div #element></div>
這是一個作業示例 https://stackblitz.com/edit/angular-ivy-nszzdt
uj5u.com熱心網友回復：
@ViewChildren('element', { read: ElementRef }) public elements!: QueryList<ElementRef>;
public addNewColumn(): void {
const arrayLength: number = this.columns.length 1;
this.columns.push({
col_num: arrayLength,
type_id: TypeId.Number,
title: 'Add column',
});
this.columnsChanged.emit(this.columns);
this.recalculateColumnNumbers();
setTimeout(() => this.elements.last.nativeElement.click());
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/376694.html