Question

在我的父组件中，我引用了两个子组件，如：

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

它创建了两个文件上传控件，如： file upload

因为我使用输入和标签来模拟fileUpload控件，所以我需要将一些值绑定到标签以显示用户选择的文件名。我有一个fileChange函数，如：

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'
    }
}

但是当我点击第二个控件并选择一个文件时，它没有反应，但第一个控件的节目已经改变了？ the problem

这是cyPageFileUploadEle组件的代码：

 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 1

我解决了这个问题，因为我使用输入控件的相同ID，只需看it

Angular 2：重复使用相同的组件

1 个答案: