前端之家

  1. 首页
  2. 问答

无法使用角度材料表显示从本地存储到垫子表的数据。

• 问答

[附加控制台图像 ][1] ///嗨，我无法在mat表中显示本地存储数据，该数据以formValue = JSON.parse（localStorage.getItem（'form-data'））;的形式存储在formvalue中；提交点击功能。

-------------------------- html文件代码------------------- ----------------------------------- 

<pre>

<div id="homewid" class="container">
  <div class="row">
    <div class="col-md-12 main-head text-right">
      <!-- <h1 class="main-head text-center"><i class="material-icons">
            dashboard
          </i>Dashboard</h1> -->
      <!-- mat-raised-button -->
      <button type="button" class="btn btn-primary" (click)="openmodal(template)">Add Employee</button>
      <!-- <button matTooltip="create new record"   type="button" class="btn btn-primary" data-toggle="modal"
        data-target="#exampleModalCenter">Add Employee</button> -->
    </div>

    <mat-form-field>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Enter emp_id,name,project... ">
    </mat-form-field>

    <div class="mat-elevation-z8 table">
      <table mat-table [dataSource]="formValue" matsort>

        <!-- ID Column -->
        <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Emp_Id </th>
          <td mat-cell *matCellDef="let row"> {{row.id}} </td>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
          <td mat-cell *matCellDef="let row"> {{row.name}} </td>
        </ng-container>

        <!-- Progress Column -->
        <ng-container matColumnDef="email">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>
          <td mat-cell *matCellDef="let row"> {{row.email}} </td>
        </ng-container>



        <!-- Color Column -->
        <ng-container matColumnDef="contact">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Contact </th>
          <td mat-cell *matCellDef="let row"> {{row.contact}} </td>
        </ng-container>


        <ng-container matColumnDef="project">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Project </th>
          <td mat-cell *matCellDef="let row"> {{row.project}} </td>
        </ng-container>

        <!-- <ng-container matColumnDef="project">
              <th mat-header-cell *matHeaderCellDef mat-sort-header> Edit/Delete </th>
              <td mat-cell *matCellDef="let row"> {{row.project}} </td>
            </ng-container> -->

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;">
        </tr>
      </table>

      <mat-paginator [pageSizeOptions]="[5,10,25,100]"></mat-paginator>
    </div>

  </div>
</div>

<!-- Modal -->
<!-- 
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document"> -->
<!-- <br><br> -->
<pre class="card card-block card-header">{{message}}</pre>
<ng-template #template>
  <div class="modal-body text-center">
    <form [formGroup]="registrationForm" (ngSubmit)="confirm()">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Create Employee Record</h5>
          <button type="button" class="close" (click)="modalRef.hide()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">


          <!-- 
          <div class="example-container"> -->
          <mat-form-field>
            <input formControlName="emp_id" type="text" matInput placeholder="Emp_Id">
          </mat-form-field>

          <mat-form-field>
            <input formControlName="name" type="text" matInput placeholder="Name">
          </mat-form-field>

          <mat-form-field>
            <input formControlName="email" type="text" matInput placeholder="Email">
          </mat-form-field>

          <mat-form-field>
            <input formControlName="contact" type="text" matInput placeholder="Contact">
          </mat-form-field>



          <mat-form-field>
            <input formControlName="project" type="text" matInput placeholder="Project">
          </mat-form-field>
          <!-- </div> -->

        </div>
        <div class="modal-footer">
          <button type="submit" class="footerbtn" (click)="confirm()">SUBMIT</button>

        </div>
      </div>
    </form>
    <!-- <button type="button" class="btn btn-default" (click)="confirm()" >Yes</button>
    <button type="button" class="btn btn-primary" (click)="decline()" >No</button> -->
  </div>
</ng-template>


</pre>

================================================ ================================================== ==

======================= ts文件代码===================== ======================== 



    import { Component,OnInit,ViewChild,TemplateRef } from '@angular/core';
import { Router,activatedRoute,NavigationEnd,RoutesRecognized } from '@angular/router';
import { MatPaginator } from '@angular/material/paginator';
import { Matsort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { FormGroup,FormControl } from '@angular/forms';
// import { Location } from '@angular/common';
import { bsmodalService,bsmodalRef } from 'ngx-bootstrap/modal';


var formValue : any = {};
export interface UserData {
  id: string;
  name: string;
  email: string;
  contact: string;
  project: string;
}



@Component({
  selector: 'app-home',templateUrl: './home.component.html',styleUrls: ['./home.component.css'],// providers: [Location]
})



export class HomeComponent implements OnInit {
  registrationForm: FormGroup;

  displayedColumns: string[] = ['id','name','email','contact','project'];

  dataSource: MatTableDataSource<UserData>;

  @ViewChild(MatPaginator,{ static: true }) paginator: MatPaginator;
  @ViewChild(Matsort,{ static: true }) sort: Matsort;
  modalRef: bsmodalRef;
  message: string;



  constructor(private _route: activatedRoute,private router: Router,private modalService: bsmodalService) {

    const users = Array.from({ length: 100 },(_,k) => createNewUser(k + 1));



    // Assign the data to the data source for the table to render
    this.dataSource = new MatTableDataSource(users);
  }


  openmodal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template,{ class: 'modal-sm' });
  }




  ngOnInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;

    this.registrationForm = new FormGroup({
      emp_id: new FormControl(),name: new FormControl(),email: new FormControl(),contact: new FormControl(),project: new FormControl()

    });
  }


  confirm(): void {
    console.log(this.registrationForm.value);


    localStorage.setItem('form-data',JSON.stringify(this.registrationForm.value));

     formValue = JSON.parse(localStorage.getItem('form-data'));

    console.log(formValue);


    //  formValuee =  Object.assign({},formValue);
    // console.log(formValuee);
    this.message = 'Confirmed!';
    this.modalRef.hide();
  }


  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

}


/** Builds and returns a new User. */
function createNewUser(id:number) : UserData {



  return {  
    id: formValue.id,name: formValue.name,email: formValue.email,contact: formValue.contact,project: formValue.project 

  };
}

=============================================模块文件代码===================================== 




import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SideBarComponent } from './projectManager/side-bar/side-bar.component';
import { NavigationComponent } from './projectManager/navigation/navigation.component';
import { RegistrationComponent } from './projectManager/registration/registration.component';
import { NgxEditorModule } from 'ngx-editor';
import { MatAutocompleteModule,MatsnackBarModule,MatChipsModule,MatBadgeModule,MatPaginatorModule,MatTooltipModule,MatExpansionmodule,MatSelectModule,MatCheckboxModule,MatIconmodule,MatProgressspinnerModule,MatButtonmodule,MatInputModule,MatCardmodule,MatProgressBarModule,MatSlideToggleModule } from '@angular/material';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { RouterModule,Routes } from '@angular/router'
import { HttpClientModule } from '@angular/common/http'
import {MatSidenavModule} from '@angular/material/sidenav';
import { EditComponent } from './projectManager/edit/edit.component';
import { HomeComponent } from './projectManager/home/home.component';
import { AvatarModule } from 'ngx-avatar';
import {MatFormFieldmodule} from '@angular/material/form-field';
import {MatsortModule} from '@angular/material/sort';
import {MatTableModule} from '@angular/material/table';

//import {MatTableDataSource} from '@angular/material/table';
import { ModalModule } from 'ngx-bootstrap';

@NgModule({
  declarations: [
    AppComponent,SideBarComponent,NavigationComponent,RegistrationComponent,EditComponent,HomeComponent
  ],imports: [
    ModalModule.forRoot(),MatsortModule,MatTableModule,MatFormFieldmodule,AvatarModule,BrowserModule,BrowserAnimationsModule,HttpClientModule,FormsModule,MatAutocompleteModule,ReactiveFormsModule,MatSidenavModule,MatSlideToggleModule,NgxEditorModule,RouterModule.forRoot([


      { path: 'registration',component: RegistrationComponent },{ path: 'navigation',component: NavigationComponent },{ path: 'home',component: HomeComponent },{ path: 'edit',component: EditComponent },{ path: 'sidebar',component: SideBarComponent },//     { path: '',redirectTo: 'registration',pathMatch: 'full' },])

  ],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

======================================== css文件代码==== ========================================== 


:root {  font-size: 10px; } 

/* .modal {
  margin-bottom:50em;
 } */
 /* .center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
} */


/* .modal-backdrop {
  display:none;
} */

#homewid{
margin-left: 12em;

}

.btn {
  color: white;
  background-color: black;
}


.main-head{
    margin: auto;
    margin-top: 12%;
    padding: 25px;

}
@media screen and (max-width: 500px){
  .main-head{
    margin: auto;
    margin-top: 18%;
    font-size: 2rem;
}
}

@media screen and (max-width: 276px){
  .main-head{
    margin: auto;
    margin-top: 48%;
}
}
@media screen and (max-width: 226px){
  .main-head{
    margin: auto;
    margin-top: 68%;
}
}

.example-form {
    min-width: 150px;
    max-width: 500px;
    width: 100%;
  }

  .example-full-width {
    width: 100%;
    background-color: rgb(0,0);
     color: white;  
    padding: 10px;

  }

  table {
    width: 100%;

  }

  .title{
    width: 30%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.gridbtn{
    width: 30%;
}

.title-expansion{
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  color: black !important;
  font-size: 1.3rem;
}

.status-done{
  text-transform: uppercase;
  color: rgb(238,234,30) !important;
}

.status-progress{
  text-transform: uppercase;
  color: rgb(44,150,18) !important;
}

.status-backlog{
  text-transform: uppercase;
  color: red !important;
}

.status-testing{
  text-transform: uppercase;
  color: darkorchid;
}

.slideout{
  animation: yourAnimation 0.5s forwards 0s ease;
}

#exampleModalCenter { 
  display:true;
 }


@keyframes yourAnimation{
  0%{
      transform: translateX(-100%);
      }
  100%{
      transform: translateX(0%);
      }
}



table {
  width: 100%;
}

.mat-form-field {
  font-size: 14px;
  width: 100%;
}

td,th {
  width: 25%;
}
bajo42 回答：无法使用角度材料表显示从本地存储到垫子表的数据。
暂时没有好的解决方案，如果你有好的解决方案，请发邮件至：iooj@foxmail.com
angular-materialangular-reactive-formsangular8mat-table
本文链接：https://www.f2er.com/3149311.html

大家都在问