CODEWITHSUNDEEP
angular
oceania
oceania

Reputation: 78

Angular 2 : 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'
        }
    }
}

Upvotes: 1

Views: 1373

Answers (1)

oceania
oceania

Reputation: 78

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

Upvotes: 1

Related Questions