I am building a drag and drop UI and in my onDrop method, update an object
item's property. I am pretty positive that I have tried about every method
to get my ngFor loop to update, and nothing seems to work. As you will see
in my component.ts I have tried ChangeDetectorRef, NgZone, and
ApplicationRef
import { Component, OnInit, ChangeDetectorRef, NgZone, ApplicationRef } from
'@angular/core';
import { GetStoryFunnelService } from
'../../services/get-story-funnel.service';
@Component({
selector: 'app-funnel-grid',
templateUrl: './funnel-grid.component.html',
})
export class FunnelGridComponent implements OnInit {
results: any;
columnNames = [
{id: 0, name: 'Opened', items: []},
{id: 1, name: 'Responded', items: []},
{id: 2, name: 'Material requested', items: []},
{id: 3, name: 'Material sent', items: []},
{id: 4, name: 'Interview requested', items: []},
{id: 5, name: 'Interview completed', items: []},
{id: 6, name: 'Follow up sent', items: []},
{id: 7, name: 'Follow up responded', items: []},
{id: 8, name: 'Article secured', items: []},
{id: 9, name: 'Article published', items: []},
{id: 10, name: 'Not interested', items: []}
];
constructor(
private cdRef: ChangeDetectorRef,
private zone: NgZone,
private appRef: ApplicationRef,
private getFunnel: GetStoryFunnelService
) { }
ngOnInit() {
this.getFunnel.getStoryFunnel().subscribe(data => {
this.results = data;
});
}
onItemDrop(event: any) {
const dropId = event.nativeEvent.srcElement.id;
const dropItem = event.dragData;
const index = this.results.findIndex(item => {
return item.contactId === dropItem.contactId;
});
this.results[index].storyFunnelStatusId = dropId;
// WORKS TO THIS POINT...VIEW NOT UPDATING AFTER
// this.results.splice(index, 1);
// this.results.push(dropItem);
// this.results = [ ...this.results ];
// this.results = [ ...this.results, dropItem ];
// this.cdRef.detectChanges();
// this.cdRef.markForCheck();
this.appRef.tick();
/* this.zone.run(() => {
this.results = this.results;
console.log('zone update');
}); */
console.log(this.results);
}
}
and the template:
<div class="board-container">
<div class="board-column" *ngFor="let column of columnNames">
<div class="board-heading">
{{ column.name }}
<span class="count">4</span>
</div>
<div id="{{ column.id }}"
class="board-body h-100"
(onDrop)="onItemDrop($event)"
droppable>
<div class="card bg-light-blue mb-2" *ngFor="let item of
(results | groupBy: column.id)" [dragData]="item" draggable>
<div class="card-body">
<div class="card-title mb-0">
<h6>
<span class="text-primary"><strong>{{
item.contactName }}</strong></span>
<span class="text-secondary">- {{
item.mediaOutletName }}</span>
</h6>
<button class="btn btn-transparent p-0">
<small><i class="fa fa-caret-down p-0"
></i></small>
</button>
</div>
<div class="card-text text-dark">
Sent: {{ item.updatedDate | date }}
</div>
</div>
</div>
</div>
</div>
</div>
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
