Javascript Como se corrige o erro do console do DevTools do Firefox com Angular?

[Eduardo de Quadros]

Meu erro no console quando clico na aba Parâmetros da _nav:

 

ERROR Error: "[object Object]"
resolvePromisewebpack-internal:///../../../../zone.js/dist/zone.js:824:31
resolvePromisewebpack-internal:///../../../../zone.js/dist/zone.js:795:17
scheduleResolveOrRejectwebpack-internal:///../../../../zone.js/dist/zone.js:873:17
invokeTaskwebpack-internal:///../../../../zone.js/dist/zone.js:425:17
onInvokeTaskwebpack-internal:///../../../core/esm5/core.js:4816:24
invokeTaskwebpack-internal:///../../../../zone.js/dist/zone.js:424:17
runTaskwebpack-internal:///../../../../zone.js/dist/zone.js:192:28
drainMicroTaskQueuewebpack-internal:///../../../../zone.js/dist/zone.js:602:25
invokeTaskwebpack-internal:///../../../../zone.js/dist/zone.js:503:21
invokeTaskwebpack-internal:///../../../../zone.js/dist/zone.js:1540:9
globalZoneAwareCallbackwebpack-internal:///../../../../zone.js/dist/zone.js:1566:17
core.js:1350
defaultErrorLogger
core.js:1350
ErrorHandler.prototype.handleError
core.js:1411
next
core.js:5376:134
EventEmitter.prototype.subscribe/schedulerFn<
core.js:4223:34
SafeSubscriber.prototype.__tryOrUnsub
Subscriber.js:239
SafeSubscriber.prototype.next
Subscriber.js:186
Subscriber.prototype._next
Subscriber.js:127
Subscriber.prototype.next
Subscriber.js:91
Subject.prototype.next
Subject.js:56
EventEmitter.prototype.emit
core.js:4203:22
onHandleError/<
core.js:4651:48
ZoneDelegate.prototype.invoke
zone.js:392
Zone.prototype.run
zone.js:142
NgZone.prototype.runOutsideAngular
core.js:4577:47
onHandleError
core.js:4651
ZoneDelegate.prototype.handleError
zone.js:396
Zone.prototype.runGuarded
zone.js:158
_loop_1
zone.js:702
api.microtaskDrainDone
zone.js:711
drainMicroTaskQueue
zone.js:610
ZoneTask.invokeTask
zone.js:503
invokeTask
zone.js:1540
globalZoneAwareCallback
zone.js:1566

/home/eduardomqs/estagio/scl/src/app/app.settings.ts:

export class AppSettings {
    public static BASE_URL= 'http://crs.unochapeco.edu.br/crs-api/public';
    public static BASE_API= 'http://crs.unochapeco.edu.br/crs-api/public';
    public static BASE_URL_SERVER = '/zend/scl';

}

/home/eduardomqs/estagio/scl/src/app/app.routing.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// Import Containers
import {
  FullLayoutComponent,
  SimpleLayoutComponent
} from './containers';

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full',
  },
  {
    path: '',
    component: FullLayoutComponent,
    data: {
      title: 'Home'
    },
    children: [
      {
        path: 'dashboard',
        loadChildren: './views/dashboard/dashboard.module#DashboardModule'
      },
      {
        path: 'components',
        loadChildren: './views/components/components.module#ComponentsModule'
      },
      {
        path: 'icons',
        loadChildren: './views/icons/icons.module#IconsModule'
      },
      {
        path: 'widgets',
        loadChildren: './views/widgets/widgets.module#WidgetsModule'
      },
      {
        path: 'charts',
        loadChildren: './views/chartjs/chartjs.module#ChartJSModule'
      },
      {
        path: 'itens-por-laboratorio',
        loadChildren: './views/itens-por-laboratorio/itens-por-laboratorio.module#ItensPorLaboratorioModule'
      },
      {
        path: 'parametros',
        loadChildren: './views/parametros/parametros.module#ParametrosModule'
      },
        {
            path: 'requisicao',
            loadChildren: './views/requisicao/requisicao.module#RequisicaoModule'
        },
    ]
  },
  {
    path: 'pages',
    component: SimpleLayoutComponent,
    data: {
      title: 'Pages'
    },
    children: [
      {
        path: '',
        loadChildren: './views/pages/pages.module#PagesModule',
      }
    ]
  }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

/home/eduardomqs/estagio/scl/src/app/app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { AppComponent } from './app.component';

// Import containers
import {
  FullLayoutComponent,
  SimpleLayoutComponent
} from './containers';

const APP_CONTAINERS = [
  FullLayoutComponent,
  SimpleLayoutComponent
]

// Import components
import {
  AppAsideComponent,
  AppBreadcrumbsComponent,
  AppFooterComponent,
  AppHeaderComponent,
  AppSidebarComponent,
  AppSidebarFooterComponent,
  AppSidebarFormComponent,
  AppSidebarHeaderComponent,
  AppSidebarMinimizerComponent,
  APP_SIDEBAR_NAV
} from './components';

const APP_COMPONENTS = [
  AppAsideComponent,
  AppBreadcrumbsComponent,
  AppFooterComponent,
  AppHeaderComponent,
  AppSidebarComponent,
  AppSidebarFooterComponent,
  AppSidebarFormComponent,
  AppSidebarHeaderComponent,
  AppSidebarMinimizerComponent,
  APP_SIDEBAR_NAV
]

// Import directives
import {
  AsideToggleDirective,
  NAV_DROPDOWN_DIRECTIVES,
  ReplaceDirective,
  SIDEBAR_TOGGLE_DIRECTIVES
} from './directives';

const APP_DIRECTIVES = [
  AsideToggleDirective,
  NAV_DROPDOWN_DIRECTIVES,
  ReplaceDirective,
  SIDEBAR_TOGGLE_DIRECTIVES
]

// Import routing module
import { AppRoutingModule } from './app.routing';

// Import 3rd party components
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { ChartsModule } from 'ng2-charts/ng2-charts';
import { ModalModule } from "ngx-bootstrap";
import { ToastModule } from 'ng2-toastr/ng2-toastr';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { DataTablesModule } from "angular-datatables";
import { Ng2TableModule } from "ngx-datatable";


@NgModule({
  imports: [
    ToastModule.forRoot(),
    BrowserModule,
    AppRoutingModule,
    BsDropdownModule.forRoot(),
    TabsModule.forRoot(),
    ChartsModule,
    ModalModule,
    BrowserAnimationsModule,
    DataTablesModule,
    Ng2TableModule,
      ModalModule.forRoot()
  ],
  declarations: [
    AppComponent,
    ...APP_CONTAINERS,
    ...APP_COMPONENTS,
    ...APP_DIRECTIVES
  ],
  providers: [{
    provide: LocationStrategy,
    useClass: HashLocationStrategy
  }],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

/home/eduardomqs/estagio/scl/src/app/_nav.ts:

export const navigation = [
  {
    name: 'Dashboard',
    url: '/dashboard',
    icon: 'icon-speedometer',
    badge: {
      variant: 'info',
      text: 'Novo'
    }
  },
  {
    title: true,
    name: 'Laboratórios'
  },
  {
    name: 'Itens Por Laboratório',
    url: '/itens-por-laboratorio',
    icon: 'icon-puzzle',
  },
    {
        title: true,
        name: 'Acesso'
    },
    {
        name: 'Parâmetros',
        url: '/parametros',
        icon: 'icon-puzzle'
    },
    {
        name: 'Requisição',
        url: '/requisicao',
        icon: 'icon-puzzle'
    },
    {
      name: 'CRS',
      url: 'http://crs.unochapeco.edu.br/site',
      icon: 'icon-cloud-download',
      class: 'mt-auto',
      variant: 'primary'
    }
];

/home/eduardomqs/estagio/scl/src/app/views/parametros/parametros-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {ParametrosComponent} from "./parametros.component";

const routes: Routes = [
    {
        path: '',
        data: {title: 'Parâmetros'},
        children: [
            {
                path: '',
                component: ParametrosComponent,
                data: {title: 'Parâmetros'}
            }
        ]
    }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ParametrosRoutingModule { }

/home/eduardomqs/estagio/scl/src/app/views/parametros/parametros.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ParametrosRoutingModule } from './parametros-routing.module';
import { ParametrosComponent } from './parametros.component';
import {ModalModule} from "ngx-bootstrap";
import {FormsModule} from "@angular/forms";

@NgModule({
  imports: [
    CommonModule,
    ParametrosRoutingModule,
      ModalModule.forRoot(),
      FormsModule
  ],
  declarations: [ParametrosComponent]
})
export class ParametrosModule { }

/home/eduardomqs/estagio/scl/src/app/views/parametros/parametros.component.ts:

import {Component, OnInit, ViewChild, ViewContainerRef} from '@angular/core';
import {ModalDirective} from 'ngx-bootstrap';
import {Parametros} from '../../model/parametros';
import {ParametrosService} from '../../services/parametros.service';
import { ToastsManager } from 'ng2-toastr';
import {DataTableDirective} from 'angular-datatables';
import {Subject} from 'rxjs/Subject';

@Component({
    selector: 'app-parametro',
    templateUrl: './parametros.component.html',
    styleUrls: ['./parametros.component.scss'],
    providers: [ParametrosService]
})

export class ParametrosComponent implements OnInit {

    @ViewChild('novoParametroModal') novoParametroModal: ModalDirective;
    @ViewChild('deleteParametroModal') deleteParametroModal: ModalDirective;
    @ViewChild('editarParametroModal') editarParametroModal: ModalDirective;
    @ViewChild(DataTableDirective) dtElement: DataTableDirective;

    dtOptions: DataTables.Settings = {};
    dtTrigger: Subject<any> = new Subject();

    public parametro = new Parametros();

    constructor(private parametroService: ParametrosService, public toastr: ToastsManager, vcr: ViewContainerRef) {
        this.toastr.setRootViewContainerRef(vcr);
    }

    public validation_messages = {
        id: [],
        desc_parametro: []
    };

    rerender(): void {
        this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
            dtInstance.destroy();
            this.getParametro();
        });
    }

    onSubmit() {
        if (this.parametro.id === null) {
            this.parametroService.create(this.parametro).subscribe(
                data => {
                    const response = (data as Parametros);
                    this.rerender();
                    this.toastr.success('Dados Salvos com Sucesso!', 'Sucesso!');
                }, error => {
                    if (error.parametro === 422) {
                        this.toastr.error('Estão faltando dados, verfique os campos e tente novamente!', 'Oops!');
                        this.validation_messages = error.error.validation_messages;
                        this.validation_messages.id = (<any>Object).values(this.validation_messages.id);
                        this.validation_messages.desc_parametro
                            = (<any>Object).values(this.validation_messages.desc_parametro);
                        return;
                    } else {
                        this.toastr.error('Um erro ocorreu, contate o Administrador!', 'Oops!');
                    }
                }
            );
        } else {
            this.parametroService.update(this.parametro).subscribe(
                data => {
                    const response = (data as Parametros);
                    for (const i in this.parametro) {
                        if (this.parametro[i].id === response.id) {
                            this.parametro[i] = response;
                        }
                    }
                    this.rerender();
                    this.toastr.success('Dados Salvos com Sucesso!', 'Sucesso!');
                    this.cleanParametro();
                }, error => {
                    if (error.parametro === 422) {
                        console.log(error);
                        return;
                    } else {
                        this.toastr.error('Um erro ocorreu, contate o Administrador!', 'Oops!');
                    }
                }
            );
        }
    }

    // solicitação de confirmação para a exclusão
    deleteConfirm(parametro) {
        this.parametro = parametro;
        this.deleteParametroModal.show();
    }

    // exclusão de registro
    delete() {
        for (const i in this.parametro) {
            if (this.parametro[i] === this.parametro) {
                this.parametroService.delete(this.parametro).subscribe(
                    data => {
                        this.toastr.success('Registro Excluído com Sucesso!', 'Sucesso!');
                        this.rerender();
                    }, error => {
                        this.toastr.error('Esse parametro está vinculado a uma requisição, e não pode ser deletado!', 'Oops!');
                        console.log(error);
                    }
                );
                break;
            }
        }
        this.deleteParametroModal.hide();
    }

    // atualizar dado
    update(parametro) {
        this.parametro = parametro;
        this.editarParametroModal.show();
    }

    // limpar objeto selecionado
    cleanParametro(): void {
        this.parametro = {
            id: null,
            desc_parametro: null,
            ativo: false,
            ano_vigente: 2018,
            semestre_vigente: 2
        };
    };


    // pegar os registros
    getParametro(): void {
        this.parametroService.getParametro().subscribe(data => {
                const response = (data as any);
                this.parametro = response;
                this.dtTrigger.next();
            }, error => {
                this.toastr.error('Um erro ocorreu, contate o Administrador!', 'Oops!');
                console.log(error);
            }
        );
    }

    ngOnInit() {
        this.getParametro();
        this.dtOptions = <DataTables.Settings>{
            pagingType: 'full_numbers',
            pageLength: 10,
            order: [0, 'desc'],
            language: {
                url: 'assets/language/pt-br.json'
            }
        };
    }
}

/home/eduardomqs/estagio/scl/src/app/views/parametros/parametros.component.spec.ts:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { ParametrosComponent } from './parametros.component';

describe('ParametrosComponent', () => {
  let component: ParametrosComponent;
  let fixture: ComponentFixture<ParametrosComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ParametrosComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ParametrosComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

/home/eduardomqs/estagio/scl/src/app/views/parametros/parametros.component.scss:

.no-padding{
  padding-left: 0px;
}

th,td {
  text-align: center;
}

tr {
  width: 100%;
}

.celula {
  width: 10%;
}

.celulaA {
  width: 30%;
}

#op {
  font-size: 18px;
  margin-left: 10px;
  margin-right: 10px;
}

#placeholderDiv{
  margin-top: 20px;
  margin-bottom: 20px;
}

.ng-valid[required], .ng-valid.required  {
  border-left: 5px solid #42A948; /* green */
}

.ng-invalid:not(form)  {
  border-left: 5px solid #a94442; /* red */
}

/home/eduardomqs/estagio/scl/src/app/views/parametros/parametros.component.html:

<div class="card">
    <div class="card-header">
        <h1>Parametro da Requisição</h1>
    </div>
    <div class="card-body">
        <div class="btn group no-padding">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"
                    (click)="novoParametroModal.show(); cleanParametro();">
                Novo Parâmetro
            </button>
        </div>
        <table datatable[dtOptions]="dtOptions" datatable[dtTrigger]="dtTrigger" class="table table-bordered table-striped">
            <thead>
            <tr>
                <th class="celula">Ações</th>
                <th class="celulaA">ID</th>
                <th class="celulaA">Ativo</th>
                <th class="celulaA">Descrição do Parâmetro</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let parametro of Parametro; let i = index">
                <td class="celula">
                    <i class="fa fa-pencil" id="op" style="cursor: pointer; color: green" title="Editar"
                       (click)="update(parametro)"></i>
                    <i class="fa fa-trash" id="op" style="cursor: pointer; color: red" title="Excluir"
                       (click)="deleteConfirm(parametro)"></i>
                </td>
                <td class="celulaA">
                    {{parametro.desc_Parametro}}
                </td>
            </tr>
            <!--<tr *ngIf="Parametro?.length == 0">-->
            <!--<td colspan="3" class="no-data-available">No data!</td>-->
            <!--</tr>-->
            </tbody>
        </table>
    </div>
</div>

<!--MODAL criar parametro-->
<div bsModal #novoParametroModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-primary" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Cadastrar novo Parâmetro:</h4>
                <button type="button" class="close" (click)="novoParametroModal.hide()" aria-label="Fechar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form (ngSubmit)="onSubmit()">
                <div id="placeholderDiv" class="col-sm-12">
                    <input id="formCriar" class="form-control" type="text" style="width: 100%" placeholder="Novo Parametro"
                           [(ngModel)]="parametro.desc_parametro" ([ngModelOptions])="{standalone: true}"
                           required #desc_parametro="ngModel" name="desc_parametro">
                    <div *ngIf="desc_parametro.errors && desc_parametro.touched" class="alert alert-danger">
                        <div *ngIf="desc_parametro.errors.required">
                            Um Parâmetro é necessário.
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secundary" (click)="novoParametroModal.hide();">
                        Cancelar
                    </button>
                    <button type="submit" class="btn btn-primary" (click)="novoParametroModal.hide();">
                        Salvar
                    </button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!--MODAL editar parametro-->
<div bsModal #editarParametroModal="bs-modal" class="modal fade" id="modal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true" [config]="{backdrop: 'static', keyboard: false}">
    <div class="modal-dialog modal-primary" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Editar Parâmetro:</h4>
                <button type="button" class="close" (click)="editarParametroModal.hide(); rerender();" aria-label="Fechar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form (ngSubmit)="onSubmit()">
                <div id="placeholderDiv" class="col-sm-12">
                    <input [(ngModel)]="parametro.desc_Parametro" class="form-control"
                           name="desc_Parametro" id="desc_Parametro" type="text"
                           value="{{parametro.desc_Parametro}}"
                           required #desc_Parametro="ngModel" name="ngModel">
                    <div *ngIf="desc_Parametro.errors && desc_Parametro.touched" class="alert alert-danger">
                        <div *ngIf="desc_Parametro.errors.required">
                            Um Parâmetro é necessário.
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secundary" (click)="editarParametroModal.hide(); rerender();">
                        Cancelar
                    </button>
                    <button type="submit" class="btn btn-primary" (click)="editarParametroModal.hide()">
                        Salvar
                    </button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!--MODAL deletar parametro-->
<div bsModal #deleteParametroModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-danger" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Excluir registro</h4>
                <button type="button" class="close" (click)="deleteParametroModal.hide()" aria-label="Fechar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form>
                <div id="placeholderDiv" class="col-sm-12">
                    <p>Tem certeza que deseja excluir o Parâmetro {{parametro.desc_Parametro}}?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secundary" (click)="deleteParametroModal.hide()">
                        Cancelar
                    </button>
                    <button type="button" class="btn btn-danger" (click)="delete()">Excluir
                    </button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Nesse HTML também nos modais criar e editar é pra definir a descrição do parâmetro e se está ativo.

 

/home/eduardomqs/estagio/scl/src/app/services/service.ts:

import { HttpHeaders } from '@angular/common/http';

export class Service {
    protected headers = {headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'Authorization': 'Bearer 93b254ef3932952d11f8987c57f94caa28615b2d'
    })};
}

/home/eduardomqs/estagio/scl/src/app/services/parametros.service.ts:

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Parametros } from "../model/parametros";
import { Service } from "./service";

@Injectable()
export class ParametrosService extends Service {

    constructor(private http: HttpClient ) {
        super();
    }

    private baseUrl = 'http://localhost:3000/scl-parametros';

    getParametro() {
        return this.http.get(this.baseUrl, this.headers);
    }

    create(parametro: Parametros) {
        return this.http.post(this.baseUrl, parametro, this.headers);
    }

    update(parametro: Parametros) {
        return this.http.put(this.baseUrl + '/' + parametro.id, parametro, this.headers);
    }

    delete(parametro: Parametros) {
        return this.http.delete(this.baseUrl + '/' + parametro.id, this.headers);
    }

}

/home/eduardomqs/estagio/scl/src/app/services/parametros.service.spec.ts:

import { TestBed, inject } from '@angular/core/testing';

import { ParametrosService } from './parametros.service';

describe('ParametrosService', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [ParametrosService]
    });
  });

  it('should be created', inject([ParametrosService], (service: ParametrosService) => {
    expect(service).toBeTruthy();
  }));
});

/home/eduardomqs/estagio/scl/src/app/model/parametros.ts:

export class Parametros{
    id: number;
    desc_parametro: string;
    ativo: boolean;
    ano_vigente: number;
    semestre_vigente: number;
}

É minha atividade de estágio.