Erro em atualizar ao entrar no formulário - resolvido

guilhermebhte · Maio 25, 2020, 10:32pm

chat.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { SnackBarComponent } from 'src/app/core/snack-bar/snack-bar.component';
import { ChatService } from '../services/chat.service';
import { ConversartionModel, ChatConversartionModel } from './chat.conversation.model';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.scss']
})
export class ChatComponent implements OnInit {
  roomCriada: string;
  chatComponentFormGroup: FormGroup;
  conversartions: ConversartionModel[] = [];
  constructor(
    private snackbar: SnackBarComponent,
    private formBuilder: FormBuilder,
    private chatService: ChatService,
    @Inject(MAT_DIALOG_DATA) data
  )
  {
    this.roomCriada = data.room;
  }
  ngOnInit(): void {
    this.criarFormGroup();
    this.fetchMessages();
  }
  sendMessage(): void {
    if (this.chatComponentFormGroup.invalid) {
      if (this.chatComponentFormGroup.get("message").errors != null) {
        this.snackbar.openSnackBar(
          'Message is required !',
          'error'
        );
        return;
      }
      return;
    }
    this.chatService.createMessage(
      this.roomCriada,
      this.chatComponentFormGroup.get("message").value, 
    ).subscribe(
      (mensagemEnviada: any) => {
        this.snackbar
        .openSnackBar(
          mensagemEnviada.message,
          'success'
        );
        this.fetchMessages();
      }
    );
  }
  private criarFormGroup() {
    this.chatComponentFormGroup = this.formBuilder.group({
      message: new FormControl('',
        Validators.compose([
          Validators.required
        ])
      )
    });
  }
  private fetchMessages() {
    this.chatService.fetchMessages(this.roomCriada)
    .subscribe(
      (conversartions: any[]) => this.conversartions = conversartions
    );
  }
}

chat.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable, EventEmitter } from '@angular/core';
import { TELEMONITORING_API } from 'src/app/services/telemonitoring.api';
import { LoginService } from '../../login/services/login.service';
import { ChatConversartionModel, ConversartionModel, MessageModel } from '../chat/chat.conversation.model';
@Injectable({
  providedIn: 'root'
})
export class ChatService {
  caminho = 'messages';
  chatsConversation: ChatConversartionModel = new ChatConversartionModel;
  chatListOdd: string = "chat-list odd";
  chatListEven: string = "chat-list even";
  constructor(
    private loginService: LoginService,
    private httpClient: HttpClient
  ) { }
  createMessage(room: string, subject: string) {
    let mensagem: MessageModel = new MessageModel;
    mensagem.textMessage = subject;
    return this.httpClient.post(
      `${TELEMONITORING_API}` + this.caminho + '/' + room,
      mensagem
    );
  }

  countMessage(room: string) {
    this.countMessageOpened(room);
  }

  public deleteMessages() {
  }

  fetchMessages(room: string) {
    return this.httpClient.get(
      `${TELEMONITORING_API}` + this.caminho + '/' + room
    );
  }

  private countMessageOpened(room: string) {
    this.fetchMessages(room).subscribe(
      (valor: any[]) => {
        console.log('Total: ' + valor.length)
      }
    );
  }

  private conversartion(subject: string, conversartions: ConversartionModel[]) {
    let conversartion = new ConversartionModel;
    conversartion.name = String(this.loginService.nameLogged);
    conversartion.class = this.chatListEven;
    conversartion.dateTime = new Date();
    conversartion.subject = subject;
    conversartion.opened = true;
    conversartions.push(conversartion);
  }
}

chat.component.html

<mat-toolbar color="primary">Chat</mat-toolbar>
<mat-card>
    <mat-card-actions class="chat-footer">
        <div class="form-wrapper" fxLayout="row" layout-align="start center">
            <form class="form-form" [formGroup]="chatComponentFormGroup">
                <mat-form-field class="form-full-width">
                    <textarea matInput placeholder="Send message" id="message" 
                        formControlName="message" name="message" #message>
                    </textarea>
                    <mat-hint align="end">{{message.value.length}}</mat-hint>
                </mat-form-field>
                <button mat-mini-fab color="warn" (click)="sendMessage()">
              <mat-icon>send</mat-icon>
            </button>
            </form>
        </div>
    </mat-card-actions>
</mat-card>
<mat-card class="mat-card-top">
    <mat-card-content class="chat-middle-box">
        <div *ngFor="let conversation of conversartions">
            <div class="chat-message">
                <div class="chat-block">
                    <span>{{conversation.subject}}</span>
                </div>
                <span class="chat-date">{{conversation.dateTime | date: 'medium' }}</span>
            </div>
        </div>
    </mat-card-content>
</mat-card>

Ao entrar no componente ele mostra este erro:

core.js:6185 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'hidden': 'true'. Current value: 'false'.
    at throwErrorIfNoChangesMode (core.js:8092)
    at bindingUpdated (core.js:19773)
    at Module.ɵɵproperty (core.js:20921)
    at LoaderComponent_Template (loader.component.html:1)
    at executeTemplate (core.js:11949)
    at refreshView (core.js:11796)
    at refreshComponent (core.js:13229)
    at refreshChildComponents (core.js:11527)
    at refreshView (core.js:11848)
    at refreshComponent (core.js:13229)
defaultErrorLogger @ core.js:6185
handleError @ core.js:6238
(anonymous) @ core.js:42822
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:41202
tick @ core.js:42819
(anonymous) @ core.js:42659
invoke @ zone-evergreen.js:364
onInvoke @ core.js:41366
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
run @ core.js:41141
next @ core.js:42656
schedulerFn @ core.js:36886
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:36848
checkStable @ core.js:41280
onHasTask @ core.js:41387
hasTask @ zone-evergreen.js:419
_updateTaskCount @ zone-evergreen.js:440
_updateTaskCount @ zone-evergreen.js:263
runTask @ zone-evergreen.js:184
drainMicroTaskQueue @ zone-evergreen.js:569
invokeTask @ zone-evergreen.js:484
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1647
loader.component.ts:18 false
core.js:6185 ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
    at DefaultIterableDiffer.diff (core.js:28238)
    at NgForOf.ngDoCheck (common.js:4353)
    at callHook (core.js:4690)
    at callHooks (core.js:4650)
    at executeCheckHooks (core.js:4572)
    at refreshView (core.js:11807)
    at refreshComponent (core.js:13229)
    at refreshChildComponents (core.js:11527)
    at refreshView (core.js:11848)
    at refreshDynamicEmbeddedViews (core.js:13154)
defaultErrorLogger @ core.js:6185
handleError @ core.js:6238
(anonymous) @ core.js:42822
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:41202
tick @ core.js:42819
(anonymous) @ core.js:42659
invoke @ zone-evergreen.js:364
onInvoke @ core.js:41366
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
run @ core.js:41141
next @ core.js:42656
schedulerFn @ core.js:36886
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:36848
checkStable @ core.js:41280
onLeave @ core.js:41441
onInvokeTask @ core.js:41350
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1658
load (async)
customScheduleGlobal @ zone-evergreen.js:1773
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleEventTask @ zone-evergreen.js:236
(anonymous) @ zone-evergreen.js:1928
(anonymous) @ http.js:2602
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ finalize.js:11
subscribe @ Observable.js:23
call @ retry.js:11
subscribe @ Observable.js:23
call @ catchError.js:16
subscribe @ Observable.js:23
subscribeToResult @ subscribeToResult.js:9
_innerSub @ mergeMap.js:59
_tryNext @ mergeMap.js:53
_next @ mergeMap.js:36
next @ Subscriber.js:49
(anonymous) @ subscribeToArray.js:3
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ mergeMap.js:21
subscribe @ Observable.js:23
call @ filter.js:13
subscribe @ Observable.js:23
call @ map.js:16
subscribe @ Observable.js:23
fetchMessages @ chat.component.ts:72
ngOnInit @ chat.component.ts:30
callHook @ core.js:4686
callHooks @ core.js:4650
executeInitAndCheckHooks @ core.js:4591
refreshView @ core.js:11814
refreshDynamicEmbeddedViews @ core.js:13154
refreshView @ core.js:11819
refreshComponent @ core.js:13229
refreshChildComponents @ core.js:11527
refreshView @ core.js:11848
renderComponentOrTemplate @ core.js:11922
tickRootContext @ core.js:13391
detectChangesInRootView @ core.js:13425
detectChanges @ core.js:15103
tick @ core.js:42809
(anonymous) @ core.js:42659
invoke @ zone-evergreen.js:364
onInvoke @ core.js:41366
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
run @ core.js:41141
next @ core.js:42656
schedulerFn @ core.js:36886
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:36848
checkStable @ core.js:41280
onHasTask @ core.js:41387
hasTask @ zone-evergreen.js:419
_updateTaskCount @ zone-evergreen.js:440
_updateTaskCount @ zone-evergreen.js:263
runTask @ zone-evergreen.js:184
drainMicroTaskQueue @ zone-evergreen.js:569
invokeTask @ zone-evergreen.js:484
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1647
Show 69 more frames
core.js:6185 ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
    at DefaultIterableDiffer.diff (core.js:28238)
    at NgForOf.ngDoCheck (common.js:4353)
    at callHook (core.js:4690)
    at callHooks (core.js:4650)
    at executeCheckHooks (core.js:4572)
    at refreshView (core.js:11807)
    at refreshComponent (core.js:13229)
    at refreshChildComponents (core.js:11527)
    at refreshView (core.js:11848)
    at refreshDynamicEmbeddedViews (core.js:13154)
defaultErrorLogger @ core.js:6185
handleError @ core.js:6238
(anonymous) @ core.js:42822
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:41202
tick @ core.js:42819
(anonymous) @ core.js:42659
invoke @ zone-evergreen.js:364
onInvoke @ core.js:41366
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
run @ core.js:41141
next @ core.js:42656
schedulerFn @ core.js:36886
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:36848
checkStable @ core.js:41280
onLeave @ core.js:41441
onInvokeTask @ core.js:41350
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
ZoneTask.invoke @ zone-evergreen.js:469
timer @ zone-evergreen.js:2552
setTimeout (async)
scheduleTask @ zone-evergreen.js:2573
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleMacroTask @ zone-evergreen.js:233
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1134
(anonymous) @ zone-evergreen.js:2586
proto.<computed> @ zone-evergreen.js:1449
hide @ tooltip.js:1010
hide @ tooltip.js:429
(anonymous) @ tooltip.js:258
invoke @ zone-evergreen.js:364
onInvoke @ core.js:41366
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
run @ core.js:41141
(anonymous) @ tooltip.js:255
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
(anonymous) @ a11y.js:3158
invoke @ zone-evergreen.js:364
onInvoke @ core.js:41366
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
run @ core.js:41141
_emitOrigin @ a11y.js:3155
_onBlur @ a11y.js:3146
blurListener @ a11y.js:2918
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCaptureCallback @ zone-evergreen.js:1679
(anonymous) @ dialog.js:449
invoke @ zone-evergreen.js:364
onInvoke @ core.js:41366
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
(anonymous) @ zone-evergreen.js:857
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:41344
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
drainMicroTaskQueue @ zone-evergreen.js:569
invokeTask @ zone-evergreen.js:484
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1647
Show 52 more frames
core.js:6185 ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
    at DefaultIterableDiffer.diff (core.js:28238)
    at NgForOf.ngDoCheck (common.js:4353)
    at callHook (core.js:4690)
    at callHooks (core.js:4650)
    at executeCheckHooks (core.js:4572)
    at refreshView (core.js:11807)
    at refreshComponent (core.js:13229)
    at refreshChildComponents (core.js:11527)
    at refreshView (core.js:11848)
    at refreshDynamicEmbeddedViews (core.js:13154)
defaultErrorLogger @ core.js:6185
handleError @ core.js:6238
(anonymous) @ core.js:42822
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:41202
tick @ core.js:42819
(anonymous) @ core.js:42659
invoke @ zone-evergreen.js:364
onInvoke @ core.js:41366
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
run @ core.js:41141
next @ core.js:42656
schedulerFn @ core.js:36886
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:36848
checkStable @ core.js:41280
onLeave @ core.js:41441
onInvoke @ core.js:41369
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
run @ core.js:41141
(anonymous) @ animations.js:363
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
(anonymous) @ zone-evergreen.js:857
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:167
drainMicroTaskQueue @ zone-evergreen.js:569
invokeTask @ zone-evergreen.js:484
ZoneTask.invoke @ zone-evergreen.js:469
timer @ zone-evergreen.js:2552
setTimeout (async)
scheduleTask @ zone-evergreen.js:2573
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleMacroTask @ zone-evergreen.js:233
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1134
(anonymous) @ zone-evergreen.js:2586
proto.<computed> @ zone-evergreen.js:1449
hide @ tooltip.js:1010
hide @ tooltip.js:429
(anonymous) @ tooltip.js:258
invoke @ zone-evergreen.js:364
onInvoke @ core.js:41366
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
run @ core.js:41141
(anonymous) @ tooltip.js:255
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
(anonymous) @ a11y.js:3158
invoke @ zone-evergreen.js:364
onInvoke @ core.js:41366
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
run @ core.js:41141
_emitOrigin @ a11y.js:3155
_onBlur @ a11y.js:3146
blurListener @ a11y.js:2918
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCaptureCallback @ zone-evergreen.js:1679
(anonymous) @ dialog.js:449
invoke @ zone-evergreen.js:364
onInvoke @ core.js:41366
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
(anonymous) @ zone-evergreen.js:857
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:41344
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
drainMicroTaskQueue @ zone-evergreen.js:569
invokeTask @ zone-evergreen.js:484
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1647
Show 60 more frames
core.js:6185 ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
    at DefaultIterableDiffer.diff (core.js:28238)
    at NgForOf.ngDoCheck (common.js:4353)
    at callHook (core.js:4690)
    at callHooks (core.js:4650)
    at executeCheckHooks (core.js:4572)
    at refreshView (core.js:11807)
    at refreshComponent (core.js:13229)
    at refreshChildComponents (core.js:11527)
    at refreshView (core.js:11848)
    at refreshDynamicEmbeddedViews (core.js:13154)
defaultErrorLogger @ core.js:6185
handleError @ core.js:6238
(anonymous) @ core.js:42822
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:41202
tick @ core.js:42819
(anonymous) @ core.js:42659
invoke @ zone-evergreen.js:364
onInvoke @ core.js:41366
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
run @ core.js:41141
next @ core.js:42656
schedulerFn @ core.js:36886
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:36848
checkStable @ core.js:41280
onLeave @ core.js:41441
onInvokeTask @ core.js:41350
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
ZoneTask.invoke @ zone-evergreen.js:469
timer @ zone-evergreen.js:2552
setTimeout (async)
scheduleTask @ zone-evergreen.js:2573
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleMacroTask @ zone-evergreen.js:233
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1134
(anonymous) @ zone-evergreen.js:2586
proto.<computed> @ zone-evergreen.js:1449
hide @ tooltip.js:1010
_handleBodyInteraction @ tooltip.js:1069
TooltipComponent_click_HostBindingHandler @ tooltip.js:1084
executeListenerWithErrorHandling @ core.js:21693
wrapListenerIn_markDirtyAndPreventDefault @ core.js:21735
(anonymous) @ platform-browser.js:934
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:41344
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1647
core.js:6185 ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
    at DefaultIterableDiffer.diff (core.js:28238)
    at NgForOf.ngDoCheck (common.js:4353)
    at callHook (core.js:4690)
    at callHooks (core.js:4650)
    at executeCheckHooks (core.js:4572)
    at refreshView (core.js:11807)
    at refreshComponent (core.js:13229)
    at refreshChildComponents (core.js:11527)
    at refreshView (core.js:11848)
    at refreshDynamicEmbeddedViews (core.js:13154)
defaultErrorLogger @ core.js:6185
handleError @ core.js:6238
(anonymous) @ core.js:42822
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:41202
tick @ core.js:42819
(anonymous) @ core.js:42659
invoke @ zone-evergreen.js:364
onInvoke @ core.js:41366
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
run @ core.js:41141
next @ core.js:42656
schedulerFn @ core.js:36886
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:36848
checkStable @ core.js:41280
onLeave @ core.js:41441
onInvokeTask @ core.js:41350
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
ZoneTask.invoke @ zone-evergreen.js:469
timer @ zone-evergreen.js:2552
setTimeout (async)
scheduleTask @ zone-evergreen.js:2573
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleMacroTask @ zone-evergreen.js:233
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1134
(anonymous) @ zone-evergreen.js:2586
proto.<computed> @ zone-evergreen.js:1449
hide @ tooltip.js:1010
hide @ tooltip.js:429
(anonymous) @ tooltip.js:670
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:41344
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1658
core.js:6185 ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
    at DefaultIterableDiffer.diff (core.js:28238)
    at NgForOf.ngDoCheck (common.js:4353)
    at callHook (core.js:4690)
    at callHooks (core.js:4650)
    at executeCheckHooks (core.js:4572)
    at refreshView (core.js:11807)
    at refreshComponent (core.js:13229)
    at refreshChildComponents (core.js:11527)
    at refreshView (core.js:11848)
    at refreshDynamicEmbeddedViews (core.js:13154)
defaultErrorLogger @ core.js:6185
handleError @ core.js:6238
(anonymous) @ core.js:42822
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:41202
tick @ core.js:42819
(anonymous) @ core.js:42659
invoke @ zone-evergreen.js:364
onInvoke @ core.js:41366
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
run @ core.js:41141
next @ core.js:42656
schedulerFn @ core.js:36886
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:36848
checkStable @ core.js:41280
onLeave @ core.js:41441
onInvoke @ core.js:41369
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
run @ core.js:41141
scheduleListenerCallback @ animations.js:352
(anonymous) @ animations.js:715
(anonymous) @ browser.js:134
(anonymous) @ browser.js:134
(anonymous) @ browser.js:8257
_onFinish @ browser.js:8253
(anonymous) @ browser.js:8284
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1647
Show 9 more frames
core.js:6185 ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
    at DefaultIterableDiffer.diff (core.js:28238)
    at NgForOf.ngDoCheck (common.js:4353)
    at callHook (core.js:4690)
    at callHooks (core.js:4650)
    at executeCheckHooks (core.js:4572)
    at refreshView (core.js:11807)
    at refreshComponent (core.js:13229)
    at refreshChildComponents (core.js:11527)
    at refreshView (core.js:11848)
    at refreshDynamicEmbeddedViews (core.js:13154)
defaultErrorLogger @ core.js:6185
handleError @ core.js:6238
(anonymous) @ core.js:42822
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:41202
tick @ core.js:42819
(anonymous) @ core.js:42659
invoke @ zone-evergreen.js:364
onInvoke @ core.js:41366
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
run @ core.js:41141
next @ core.js:42656
schedulerFn @ core.js:36886
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:36848
checkStable @ core.js:41280
onLeave @ core.js:41441
onInvoke @ core.js:41369
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
run @ core.js:41141
(anonymous) @ animations.js:363
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
(anonymous) @ zone-evergreen.js:857
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:167
drainMicroTaskQueue @ zone-evergreen.js:569
invokeTask @ zone-evergreen.js:484
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1647
Show 7 more frames
core.js:6185 ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
    at DefaultIterableDiffer.diff (core.js:28238)
    at NgForOf.ngDoCheck (common.js:4353)
    at callHook (core.js:4690)
    at callHooks (core.js:4650)
    at executeCheckHooks (core.js:4572)
    at refreshView (core.js:11807)
    at refreshComponent (core.js:13229)
    at refreshChildComponents (core.js:11527)
    at refreshView (core.js:11848)
    at refreshDynamicEmbeddedViews (core.js:13154)
defaultErrorLogger @ core.js:6185
handleError @ core.js:6238
(anonymous) @ core.js:42822
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:41202
tick @ core.js:42819
(anonymous) @ core.js:42659
invoke @ zone-evergreen.js:364
onInvoke @ core.js:41366
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
run @ core.js:41141
next @ core.js:42656
schedulerFn @ core.js:36886
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:36848
checkStable @ core.js:41280
onLeave @ core.js:41441
onInvoke @ core.js:41369
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
run @ core.js:41141
scheduleListenerCallback @ animations.js:352
(anonymous) @ animations.js:715
(anonymous) @ browser.js:134
(anonymous) @ browser.js:134
(anonymous) @ browser.js:8257
_onFinish @ browser.js:8253
(anonymous) @ browser.js:8284
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1647
Show 9 more frames
core.js:6185 ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

Se tiro o método fetchMessages(), ele não mostra o erro

Pelo que entendi ele da erro em :
`

`
O que pode ser ?

guilhermebhte · Maio 26, 2020, 11:34am

O erro era porque o retorno não estava batendo com o model criado.

ajustado o model e está funcionando.

chat.component.ts

import { Component, Inject, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { SnackBarComponent } from 'src/app/core/snack-bar/snack-bar.component';
import { ChatService } from '../services/chat.service';
import { MessageModel, ConversartionModel } from './chat.conversation.model';
@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.scss']
})
export class ChatComponent implements OnInit {
  roomCriada: string;
  chatComponentFormGroup: FormGroup;
  conversartions: ConversartionModel;
  mensagens: MessageModel[] = [];
  constructor(
    private snackbar: SnackBarComponent,
    private formBuilder: FormBuilder,
    private chatService: ChatService,
    @Inject(MAT_DIALOG_DATA) data
  )
  {
    this.roomCriada = data.room;
  }
  ngOnInit(): void {
    this.criarFormGroup();
    this.fetchMessages();
  }
  sendMessage(): void {
    if (this.chatComponentFormGroup.invalid) {
      if (this.chatComponentFormGroup.get("message").errors != null) {
        this.snackbar.openSnackBar(
          'Message is required !',
          'error'
        );
        return;
      }
      return;
    }
    this.chatService.createMessage(
      this.roomCriada,
      this.chatComponentFormGroup.get("message").value
    ).subscribe(
      (mensagemEnviada: any) => {
        this.snackbar
        .openSnackBar(
          mensagemEnviada.message,
          'success'
        );
        this.fetchMessages();
      }
    );
  }
  private criarFormGroup() {
    this.chatComponentFormGroup = this.formBuilder.group({
      message: new FormControl('',
        Validators.compose([
          Validators.required
        ])
      )
    });
  }
  private fetchMessages() {
    this.chatService.fetchMessages(this.roomCriada)
    .subscribe(
      (resp: ConversartionModel) => {
        resp.messages.forEach(re => {
          console.log(re)
          this.mensagens.push(re)
        })
      }
    );
  }
}

chat.component.html

<mat-toolbar color="primary">Chat</mat-toolbar>
<mat-card>
    <mat-card-actions class="chat-footer">
        <div class="form-wrapper" fxLayout="row" layout-align="start center">
            <form class="form-form" [formGroup]="chatComponentFormGroup">
                <mat-form-field class="form-full-width">
                    <textarea matInput placeholder="Send message" id="message" 
                        formControlName="message" name="message" #message>
                    </textarea>
                    <mat-hint align="end">{{message.value.length}}</mat-hint>
                </mat-form-field>
                <button mat-mini-fab color="warn" (click)="sendMessage()">
              <mat-icon>send</mat-icon>
            </button>
            </form>
        </div>
    </mat-card-actions>
</mat-card>
<mat-card class="mat-card-top">
    <mat-card-content class="chat-middle-box">
        <div *ngFor="let mensagem of mensagens">
            <div class="chat-message">
                <div class="chat-block">
                    <span>{{mensagem.textMessage}}</span>
                </div>
                <span class="chat-date">{{mensagem.timestamp | date: 'medium' }}</span>
            </div>
        </div>
    </mat-card-content>
</mat-card>

chat.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable, EventEmitter } from '@angular/core';
import { TELEMONITORING_API } from 'src/app/services/telemonitoring.api';
import { LoginService } from '../../login/services/login.service';
import { ChatConversartionModel, ConversartionModel, MessageModel } from '../chat/chat.conversation.model';
@Injectable({
  providedIn: 'root'
})
export class ChatService {
  caminho = 'messages';
  chatsConversation: ChatConversartionModel = new ChatConversartionModel;
  chatListOdd: string = "chat-list odd";
  chatListEven: string = "chat-list even";
  constructor(
    private loginService: LoginService,
    private httpClient: HttpClient
  ) { }
  createMessage(room: string, subject: string) {
    let mensagem: MessageModel = new MessageModel;
    mensagem.textMessage = subject;
    return this.httpClient.post(
      `${TELEMONITORING_API}` + this.caminho + '/' + room,
      mensagem
    );
  }
  fetchMessages(room: string) {
    return this.httpClient.get(
      `${TELEMONITORING_API}` + this.caminho + '/' + room
    );
  }
}

chat.conversation.model

export class ConversartionModel {
  messages: MessageModel[];
}
export class ChatConversartionModel {
  room: string;
  conversation: ConversartionModel[] = [];
}
export class MessageModel {
  fromUser: string;
  roomId: string;
  textMessage: string;
  timestamp: Date;
}

Isso foi ajustado e está funcionando.

Lucas_Camara · Maio 26, 2020, 12:56pm

Rapaiz, te perguntar. Vejo dúvidas suas aqui referente à angular e react, mas parece que vc tem usado mais angular. Eu curto bastante JS, mas conheço bem pouco de react (e nunca mais meti a mão no angular).

No lugar onde trabalho, o povo odeia o angular e idolatra o react e vue. Eu, particularmente, acho uma bobagem pensar assim, mas por não conhecer react a fundo, não consigo opinar fortemente.

O que tu tah achando do angular? Tah bacana? Esses projetos que tu anda mexendo é pessoal ou da empresa que vc trabalha?

guilhermebhte · Maio 26, 2020, 1:55pm

As duas são fantásticas. A moda hoje é mais React do que Angular, por isso quem a idolatra. Mas também tem gente que idolatra Angular. Trabalhei em alguns órgãos do governo que estão migrando tudo para Angular. E se lá vc falar mal, kkkkk, já viu né.

Acho que a questão deve ser na mesma época do JAVA e ASP ou spring ou JSF.

Meu tcc foi um estudo com as duas.

Minha opinião e muitos podem discordar

O Angular a curva de aprendizado é maior, enquanto no React é menor.

Angular, é quase um MVC, já o React não.

React é uma biblioteca de componentes e Angular já é um Framework.

O React hoje é mais usado que o Angular.

Entre os dois sou mais o angular, porque acho mais completo.

Nunca usei Vue, então não posso dar opinião

Lucas_Camara · Maio 26, 2020, 2:26pm

Pois eh. Até entendo as diferenças das duas, mas não entendo a birra que o povo tem sendo que são propostas diferentes (um é um framework e o outro uma library).

Mas tu já teve alguma experiência no angular que vc não gostou? Sei lah, algo que não faz sentido. No que andei vendo, achei uns recursos muito bacanas (desde a última vez que usei o angular de fato - tava mexendo na versão 9 num exemplo pessoal).

Tb presto serviço num órgão público e realmente tem uns lugares que usa angular msm. Onde eu trampo o povo usa react e vuejs (VueJS eh até bacana).

javaflex · Maio 26, 2020, 2:28pm

Angular é mais pesado. Apesar de participar de qualquer projeto no emprego fixo, em freelance nao uso nenhum deles.

Lucas_Camara · Maio 26, 2020, 2:47pm

Ah sim, de fato, mas tb pq ele eh um framework. Soh não acho essa uma justificativa válida para não adotar dependendo do cenário do projeto. Vejo gente ignorando simplesmente por não gostar, saca. E isso que incomoda às vezes. Eu até concordo que o react seja mais foda, por conta da comunidade, o react-native, etc. (não falo mais pq não conheço react à fundo), mas o argumento deveria ser levada em consideração o aspecto do projeto e tudo o mais.

Fiz um projeto para testar os recursos do angular (versão 9) e não achei nada tão zuado até o momento (até algumas coisas bem mais práticas de usar do que o vuejs, que estou tendo mais contato ultimamente, por exemplo).

guilhermebhte · Maio 26, 2020, 2:56pm

Em projetos particulares sempre uso Angular mesmo, a não ser que o cliente pede uma linguagem especifica.

Se eu for escolher no momento é JAVA spring e Angular.

Até o momento nada a reclamar de performance com o uso do angular.

Não se se é costume, mas eu acho o Angular mais pratico e mais rápido para o desenvolvimento. Lógico que vai estudando um pouco ali, passando alguns novos perrengues ali, mas minha preferencia é Angular.

React estava trabalhando com Redux, e importando para o Typescript.

Em projetos do governo que trabalhei não foram simples e nem pequenos. Todos Angular e JAVA spring.

Lucas_Camara · Maio 26, 2020, 3:02pm

Tem um pessoal que trabalha comigo, que estão gostando bastante de react. No começo, falavam que era um saco, mas que depois acostuma e fica muito bom e produtivo. Espero cair num projeto para poder ver como é na real.

@guilhermebhte, vc chegou a ter alguma experiência ruim com validação de formulário no angular?

guilhermebhte · Maio 26, 2020, 3:33pm

Sempre utilizei o Validators, importado do import { Validators } from ‘@angular/forms’;

editForm = this.fb.group({
    id: [],
    codigo: [null, [Validators.required]],
    materialGrupo: [null, [Validators.required]],
    descricao: [null, [Validators.required]]
});

Erro em atualizar ao entrar no formulário - resolvido

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI