CODEWITHSUNDEEP
angularangular2-template
user5423851
user5423851

Reputation:

Template not updating after model changed

I iterate over an array containing objects:

<tr *ngFor="let file of files | orderBy: 'id':ascending:true | paginate: {id: 'FilePagination',itemsPerPage: 20, currentPage: p}">
    <th [innerHTML]="project.files.indexOf(file)+1" scope="row"></th>
    <td><a href="{{file.uri + token}}" target="_blank"><i class="fa"
                                                          [class.fa-file-audio-o]="types.audio.includes(file.type)"
                                                          [class.fa-file-pdf-o]="types.document.includes(file.type)"></i>{{"
        " + file.fullName}}</a>
    </td>
    <td>{{file.size}}</td>
    <td>{{file.timestamp | timeCalc}}</td>
    <td *ngIf="adminMode">
        <button type="button" (click)="deleteFile(file)"
                class="fa fa-trash-o btn btn-link p-0" title="Löschen"></button>
    </td>
</tr>

Calling the deleteFile method:

deleteFile(file: File) {
    this.loading = true;
    this.fileService.deleteFile(file).subscribe(
        message => this.information = message,
        error => {
            this.loading = false;
            this.errorMessage = error;
        },
        () => {
            this.files.splice(this.files.indexOf(file), 1);
            this.loading = false;
        }
    )
}

After the the subscription call is complete, the deleted file is not removed from the view. Still, it is definitely removed from array, as the index of all files in the array changed. Here are two screenshots showing the weird behavior:

Before deletion: beforeDelte

After deletion: afterDelete

Upvotes: 0

Views: 78

Answers (2)

silentsod
silentsod

Reputation: 8335

You can use filter to exclude the element you want by an object property and reassign:

this.files = this.files.filter(file => file.id !== fileToRemove.id);

Plunker which is minimable and verifiable: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=preview

Upvotes: 1

user688074
user688074

Reputation:

Use project.files

HTML

<tr *ngFor="let file of project.files | orderBy: 'id':ascending:true | paginate: {id: 'FilePagination',itemsPerPage: 20, currentPage: p};">
    <th [innerHTML]="project.files.indexOf(file)+1" scope="row"></th>
    <td><a href="{{file.uri + token}}" target="_blank"><i class="fa"
                                                          [class.fa-file-audio-o]="types.audio.includes(file.type)"
                                                          [class.fa-file-pdf-o]="types.document.includes(file.type)"></i>{{"
        " + file.fullName}}</a>
    </td>
    <td>{{file.size}}</td>
    <td>{{file.timestamp | timeCalc}}</td>
    <td *ngIf="adminMode">
        <button type="button" (click)="deleteFile(file)"
                class="fa fa-trash-o btn btn-link p-0" title="Löschen"></button>
    </td>
</tr>

Delete function:

deleteFile(file: File) {
    this.loading = true;
    this.fileService.deleteFile(file).subscribe(
        message => this.information = message,
        error => {
            this.loading = false;
            this.errorMessage = error;
        },
        () => {
            this.project.files.splice(file, 1);
            this.loading = false;
        }
    )
}

Upvotes: 0

Related Questions