невозможно отобразить данные из локального хранилища в таблицу угловых материалов mat-table.using

Question

[консольное изображение прикреплено ] [1] // привет, я не могу отобразить данные локального хранилища в mat-таблице, которые я сохранил в formvalue как formValue = JSON.parse (localStorage.getItem ('форма-данные'));при отправке нажмите функцию.

-------------------------- htmlfile код ------------------------------------------------------

<code><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}}

Создать запись сотрудника × ОТПРАВИТЬ

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

========================== Код файла =====================================================

    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,
    MatButtonModule,
    ReactiveFormsModule,
    MatIconModule,
    MatChipsModule,
    MatBadgeModule,
    MatSidenavModule,
    MatExpansionModule,
    MatSelectModule,
    MatSnackBarModule,
    MatCheckboxModule,
    MatPaginatorModule,
    MatTooltipModule,
    MatInputModule,
    MatProgressSpinnerModule,
    MatSlideToggleModule,
    MatCardModule,
    MatProgressBarModule,
    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, 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%;
}