CODEWITHSUNDEEP
angulartypescript
acostela
acostela

Reputation: 2727

Init component array when object created

I'm learning now angular2 so maybe this question is a bit silly. I'm trying to create a form and bind it dynamically to a model. The problem that I'm facing is that I can't initialize my array variable to bind it and I get an error. This is the code.

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>

My directive 

@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);
  }
}

And finally my component. What I want it's to init myObjectArray when items.queue.length > 0 but I can't find how to do it correctly.

@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>();

}

Upvotes: 0

Views: 252

Answers (1)

Martino Lessio
Martino Lessio

Reputation: 781

Please give it a try... NOTE: it was not tested! :)

@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>

Upvotes: 1

Related Questions