Topic: Uncaught TypeError: "exports" is read-only
Kartik Mehta asked 4 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 { }
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: 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
Arkadiusz Idzikowski staff commented 4 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?