gpt4 book ai didi

Angular ViewChild fileInput 注释未定义

转载 作者:行者123 更新时间:2023-12-02 03:47:42 26 4
gpt4 key购买 nike

如果我的 fileInput 元素在一个普通的 div 中,那么它工作正常。但是如果我把它放在 <ng-template></ng-template> 里面然后我得到它未定义。

这是我的代码:

HTML

<ng-template #content let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')"></button>
</div>
<div class="modal-body">
<form #documentsForm="ngForm" (ngSubmit)="onEditSubscriberDocumentsSubmit(documentsForm.value);documentsForm.reset()">
<input #fileInput type="file" #select name="document" [(ngModel)]="document" (click)="onDocUpload()" />
<input type="submit" value="Save" class="btn btn-success" [hidden]="addDocHidden">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
</div>
</ng-template>

TS

import { Component, OnInit, ViewChild , ElementRef} from '@angular/core';

export class EditSubscriberComponent {
constructor(private http: Http, private route: ActivatedRoute, private router: Router, private modalService: NgbModal) { }
@ViewChild("fileInput") fileInput: ElementRef;
ngOnInit() {
console.log(this.fileInput)
// This is undefined. If I place the <input #fileInput type="file">
// in the main div,not under ng-template, then I am getting the
// desired output
}
}

请建议我如何从 ng-template 访问 ViewChild

最佳答案

您可以使用 setter:

@ViewChild("fileInput") 
set fileInput(val: ElementRef) {
if(val) {
console.log(val);
}
}

或订阅 @ViewChildren 更改:

@ViewChildren("fileInput") fileInputs: QueryList<ElementRef>;

ngAfterViewInit() {
this.fileInputs.changes.subscribe(x => {
if(x.length) {
console.log(x[0]);
}
})
}

或者如果您确切知道模板何时初始化,则只需使用 @ViewChild

@ViewChild("fileInput") fileInput: ElementRef;

...
this.vcRef.createEmbeddedView(this.template); // pseudo code
console.log(this.fileInput);

关于Angular ViewChild fileInput 注释未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46251282/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com