Question

这是我的代码：

<input id="uploadFile" #inputFile type="file" ng2FileSelect [uploader]="uploader" (change)="onFileSelect($event, uploadDocumentTypeId)"	/>

<label for="uploadFile"  (click)="test(uploadDocumentTypeId)" class="job-btn btn btn-outline-primary small-width">Select</label>

在.ts文件中，两个函数都记录如下值：

onFileSelect(e: any, n: number) {
	console.log('typeId = ',this.uploadDocumentTypeId);
	console.log('n = ', n);
}

test(n: number){
	console.log("clicked", n);
}

问题在于，uploadDocumentTypeId的值在测试方法中是正确的，但在onFileSelect方法中它的不同。我找不到原因，为什么这个值正在改变。

控制台日志如下：

点击1
typeId = 3
n = 3
点击2
typeId = 3
n = 3
点击3
typeId = 3
n = 3

P.S输入元素有一个display：none类来代替总是显示标签，但我已将其删除以进行测试。

预期/必需的控制台日志：

点击1
typeId = 1
n = 1
点击2
typeId = 2
n = 2
点击3
typeId = 3
n = 3

如果我完全从HTML中删除标签元素，它可以正常工作。

Answer 1

首先将数字保存在属性中，然后使用它。

export class Bla {
    private documentTypeId: number;

    onFileSelect(e: any, n: number) {
        console.log('typeId = ',this.uploadDocumentTypeId);
        console.log('n = ', n);
        this.documentTypeId = n;
    }

    test(){
        console.log("clicked", this.documentTypeId);
    }

}

并删除test（）参数调用

Answer 2

最后，我终于弄清楚我在这里做错了什么。上面编写的代码是在一个在同一页面上多次使用的组件中编写的。由于输入（文件）被隐藏，并且标签用于显示良好的设计。标签无法将其自身与输入（文件）按钮的正确实例绑定。

当我删除标签并在输入（文件）按钮中设置样式时，问题就解决了。

绑定变量的值在单击标签元素时会自行更改

2 个答案: