Question

我现在正在学习angular2所以也许这个问题有点傻。我正在尝试创建一个表单并将其动态绑定到模型。我面临的问题是我无法初始化我的数组变量来绑定它，我得到一个错误。这是代码。

HTML

<input type="file" ng2FileSelect [uploader]="uploader" multiple  /><br/>

<table class="table">
    <thead>
    <tr>
        <th>Actions</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let item of uploader.queue; let i = index;" >
        <td nowrap>
            i: {{i}}
            {{item.file.name}}
            <button (click)="item.upload();" [disabled]="item.isReady || item.isUploading || item.isSuccess">Upload</button>
            <button (click)="item.cancel()" [disabled]="!item.isUploading">Cancel</button>
            <button (click)="item.remove()">Remove</button>
        </td>
        <td nowrap>
            Id: <input type="text" [(ngModel)]="myObjectArray[i].Id"/>
            Name: <input type="text" [(ngModel)]="myObjectArray[i].Name"/>
            Description: <input type="text" [(ngModel)]="myObjectArray[i].Description"/>
        </td>
    </tr>
    </tbody>
</table>

我的指示

@Directive({selector: '[ng2FileSelect]'})
export class FileSelectDirective {
  @Input() public uploader:FileUploader;

  private element:ElementRef;

  public constructor(element:ElementRef) {
    this.element = element;
  }

  public getOptions():any {
    return this.uploader.options;
  }

  public isEmptyAfterSelection():boolean {
    return !!this.element.nativeElement.attributes.multiple;
  }

  @HostListener('change')
  public onChange():any {
    let files = this.element.nativeElement.files;
    let options = this.getOptions();

    this.uploader.addToQueue(files, options);
  }
}

最后是我的组件。我想要的是在items.queue.length＆gt;时初始化myObjectArray。 0但我找不到如何正确地做到这一点。

@Component({
    selector: 'uploader',
    templateUrl: 'app/uploader/uploader.component.html',
})

export class UploaderComponent {
    public uploader: FileUploader = new FileUploader({url: 'http://localhost:33333/publish'});
    public myObjectArray: Array<MyObject> = new Array<MyObject>();

}

Answer 1

请试一试......注意：它没有经过测试！：）

@Directive({selector: '[ng2FileSelect]'})
export class FileSelectDirective {
  @Input() public uploader:FileUploader;
  @Output() public onFilesAdded() : EventEmitter<any> = new EventEmitter();

  private element:ElementRef;

  public constructor(element:ElementRef) {
    this.element = element;
  }

  public getOptions():any {
    return this.uploader.options;
  }

  public isEmptyAfterSelection():boolean {
    return !!this.element.nativeElement.attributes.multiple;
  }

  @HostListener('change')
  public onChange():any {
    let files = this.element.nativeElement.files;
    let options = this.getOptions();

    this.uploader.addToQueue(files, options);
    this.onFilesAdded.emit({
        files: files
    });
  }
}

@Component({
    selector: 'uploader',
    templateUrl: 'app/uploader/uploader.component.html',
})

export class UploaderComponent {
    public uploader: FileUploader = new FileUploader({url: 'http://localhost:33333/publish'});
    public myObjectArray: Array<MyObject> = new Array<MyObject>();

    public handleFiles(event: any){
      // handle your files array and do stuff you want   
    }
}

HTML

<input type="file"
       onFilesAdded="handleFiles($event);"
       ng2FileSelect [uploader]="uploader" multiple  /><br/>

<table class="table">
    <thead>
    <tr>
        <th>Actions</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let item of uploader.queue; let i = index;" >
        <td nowrap>
            i: {{i}}
            {{item.file.name}}
            <button (click)="item.upload();" [disabled]="item.isReady || item.isUploading || item.isSuccess">Upload</button>
            <button (click)="item.cancel()" [disabled]="!item.isUploading">Cancel</button>
            <button (click)="item.remove()">Remove</button>
        </td>
        <td nowrap>
            Id: <input type="text" [(ngModel)]="myObjectArray[i].Id"/>
            Name: <input type="text" [(ngModel)]="myObjectArray[i].Name"/>
            Description: <input type="text" [(ngModel)]="myObjectArray[i].Description"/>
        </td>
    </tr>
    </tbody>
</table>

创建对象时的Init组件数组

1 个答案: