Angular 2: представление не обновляется, когда функция вызывается из обещания - PullRequest
Новая
       49

Angular 2: представление не обновляется, когда функция вызывается из обещания

0 голосов
/ 06 июня 2018

Мой угловой довольно простой.У меня есть вид, где я отображаю объект (который находится в службе): 

<div *ngFor="let group of service.groups">
    {{group.id}} - {{group.name}}
</div>

Простая версия моего сервиса выглядит следующим образом: 

public pushNewGroup(group) {

    this.groups.push(group);
    console.log('Pushing new group!');

    // this.zone.run(() => {
    //     this.groups.push(group);
    // });

}

public addGroup(group: Group) {
    let component = this;
    this.api.postWrapper('groups', group).then(function (data: Group) {
        component.pushNewGroup(data);
    });
}

Если я создаю кнопкуЧтобы вызвать службу, все работает, и представление обновляется: 

<input type="button" (click)="pushGroup()" value="Add group/>

С вызовом службы в компоненте представления: 

pushGroup() {
    let group = { ... }
    this.service.pushNewGroup(group);
}

Но если я вызываю обещание через диалоговое окно, тогда ононе обновляет представление: 

<li (click)="addGroup()" ><a>Add Group</a></li>

Компонент (упрощенно): 

addGroup() {
    let dialogRef = this.dialog.open(AddGroupComponent, {
        data: {
            ...
        },
    });
}

export class AddGroupComponent {

    constructor(private service: service) {}

    addGroup(group: Group) {
        this.service.addGroup(group);
    }
}

Я пробовал и ngZone, и ChangeDetectionStrategy.Default.Оба решения не работают для меня.Я вижу, что объект изменяется оба раза, и журнал консоли также работает.Но представление не обновляется.

В моем @Componment нет ничего интересного.Для всего класса это: 

@Component({
    templateUrl: './mainComponent.html',
    styleUrls: ['./mainComponent.scss'],
    providers: []
})

А для моего диалога добавления группы это: 

@Component({
    selector: 'addGroup',
    templateUrl: './AddGroupComponent.html',
    styleUrls: ['./AddGroupComponent.scss'],
    providers: [ApiService, PermissionsService, Service],
    changeDetection: ChangeDetectionStrategy.Default
})

РЕДАКТИРОВАТЬ: очень трудно извлечь все это в плункер, ноЯ попытался воссоздать его и оказалось, что обещание работает.Я думаю, что вина может быть с MatDialog.Это не обновляет основной вид.Я пытался воссоздать все это в плункере, но я не могу заставить угловой материал работать в плункере.И кажется, что все другие примеры в сети также не работают:

https://embed.plnkr.co/LTAEwV6bNvoGQAFoky60/

Ответы [ 2 ]

0 голосов
/ 06 июня 2018

Почему бы вам не использовать функцию стрелки и не забыть этот хак let component = this?Может быть, это может быть проблемой.Используйте функции ES6, следуйте угловой инструкции. 

public addGroup(group: Group) {
  this.api.postWrapper('groups', group).then( (data: Group) => {
     this.pushNewGroup(data);
  });
}
0 голосов
/ 06 июня 2018

Обещание перенесет обнаружение изменений на следующий цикл обнаружения.

Попробуйте это:

Добавьте private _cdr: ChangeDetectorRef в конструктор. (Очевидно, импорт ChangeDetectorRef)

Добавьте this._cdr.detectChanges() внутри обещания (вконец).

...