oceania oceania - 9 days ago 6
AngularJS Question

angular2 same component usage repeatedly

In my parent component i reference twice child component like:

@Component({
selector:'cy-page-phone',
template:`
<cy-page-fileUploadEle></cy-page-fileUploadEle>
<cy-page-fileUploadEle></cy-page-fileUploadEle>
`,
styleUrls:['./phone.component.scss'] })


And it create two file upload control like:
file upload

Because i use the input and label to simulate the fileUpload control,so i need to bind some value to the label to show the file's name that the user selected.I have a fileChange function like:

fileChange(e:any){
let fl:FileList=e.target.files
if(fl.length>1){
this.fileName=`select ${fl.length} files`
}else if(fl.length===1){
this.fileName=fl.item(0).name
}else if(fl.length===0){
this.fileName='none select'
}
}


But when i click the second control and select a file,it has no reaction but the first control's show has changed?
the problem

And this is the cyPageFileUploadEle component's code:

import {
Component
} from '@angular/core'

@Component({
selector:'cy-page-fileUploadEle',
templateUrl:'./fileUpload.element.html',
styleUrls:[
'./fileUpload.element.scss'
]
})
export class FileUploadEle{
fileName:string='none select'
constructor(){
}
fileChange(e:any){
let fl:FileList=e.target.files
if(fl.length>1){
this.fileName=`select ${fl.length} files`
}else if(fl.length===1){
this.fileName=fl.item(0).name
}else if(fl.length===0){
this.fileName='none select'
}
}
}

Answer

I resolve the problem because i use the same id of my input control,just see it