Topic: Uncaught TypeError: "exports" is read-only

Kartik Mehta free asked 3 years ago


Expected behavior Table search should be executed

Actual behavior Component is not working and giving Uncaught TypeError:"exports" is read-only in console.

Resources (screenshots, code snippets etc.) //Mycomponent TS file import { Component, OnInit,HostListener, ViewChild } from '@angular/core'; import { TablechangeService } from 'src/app/services/tablechange.service'; import {MdbTableDirective} from 'mdbootstrap';

@Component({ selector: 'app-user-table', templateUrl: './user-table.component.html', styleUrls: ['./user-table.component.scss'] }) export class UserTableComponent implements OnInit { @ViewChild(MdbTableDirective, {static: true}) mdbTable: MdbTableDirective; elements: any = []; headElements = ['ID', 'First', 'Last', 'Handle']; searchText: string = ''; previous: string;

constructor(private tc: TablechangeService) { }

@HostListener('input') oninput() { this.searchItems(); } tabledata=[]; ngOnInit(): void {

for (let i = 1; i <= 10; i++) {
  this.elements.push({
      id: i.toString(), first: 'Wpis ' + i, last: 'Last ' + i, handle: 'Handle ' + i
  });

} this.mdbTable.setDataSource(this.elements); this.previous = this.mdbTable.getDataSource();

this.tc.gettinginfo().subscribe(
  data=> {
    this.tabledata=data;  
  },
  error => {
      console.log("Error!",error);       
    }  
)

} searchItems() { const prev = this.mdbTable.getDataSource(); if (!this.searchText) { this.mdbTable.setDataSource(this.previous); this.elements = this.mdbTable.getDataSource(); } if (this.searchText) { this.elements = this.mdbTable.searchLocalDataBy(this.searchText); this.mdbTable.setDataSource(prev); } }

} //app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; import {AuthGuard} from './gaurds/auth.guard'; import { JwtHelperService, JWT_OPTIONS } from '@auth0/angular-jwt';

import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { MDBBootstrapModule } from 'angular-bootstrap-md'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatInputModule } from '@angular/material/input'; import {MatDatepickerModule} from '@angular/material/datepicker'; import { MatNativeDateModule } from '@angular/material/core'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; import { MatSelectModule } from '@angular/material/select'; import { NavbarComponent } from './components/navbar/navbar.component'; import { LoginComponent } from './pages/login/login.component'; import { LandingComponent } from './pages/landing/landing.component'; import { SignupComponent } from './pages/signup/signup.component'; import { DashboardComponent } from './pages/dashboard/dashboard.component'; import { SidebarComponent } from './components/sidebar/sidebar.component'; import { ForgotComponent } from './pages/forgot/forgot.component'; import { ChangepwComponent } from './components/changepw/changepw.component'; import { RoyalityComponent } from './pages/royality/royality.component'; import { ProfileComponent } from './pages/profile/profile.component'; import { AuthoritydashboardComponent } from './pages/authoritydashboard/authoritydashboard.component'; import { UserTableComponent } from './components/user-table/user-table.component'; import { AddpageComponent } from './pages/addpage/addpage.component';

@NgModule({ declarations: [ AppComponent, NavbarComponent, LoginComponent, LandingComponent, SignupComponent, DashboardComponent, SidebarComponent, ForgotComponent, ChangepwComponent, RoyalityComponent, ProfileComponent, AuthoritydashboardComponent, UserTableComponent, AddpageComponent, ], imports: [ BrowserModule, AppRoutingModule, MDBBootstrapModule.forRoot(), BrowserAnimationsModule, FormsModule, MatInputModule, MatDatepickerModule, MatNativeDateModule, MatButtonModule, MatIconModule, MatSelectModule, ReactiveFormsModule, HttpClientModule ], providers: [AuthGuard,{provide: JWT_OPTIONS, useValue: JWT_OPTIONS},JwtHelperService], bootstrap: [AppComponent] }) export class AppModule { }


Arkadiusz Idzikowski staff commented 3 years ago

@Kartik Mehta Please fix the code formatting in your post, because currently, it's unreadable.

Did you try to remove the MDB Table code and imports to check if the problem is caused specifically by our component?



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB4 9.3.1
  • Device: Desktop
  • Browser: Mozzila Firefox
  • OS: Windows
  • Provided sample code: No
  • Provided link: No