Когда я обновляю данные на моде начальной загрузки, получаю ошибку по id - PullRequest
Новая
       0

Когда я обновляю данные на моде начальной загрузки, получаю ошибку по id

0 голосов
/ 14 октября 2019

Я только что начал работать под углом и попробую обновить данные о сотруднике с помощью модального загрузчика при обновлении button.but, но получаю сообщение об ошибке вроде ** Ошибка: не найдена фабрика компонентов для имени. Вы добавили его в @ NgModule.entryComponents? **

app.component.ts 

import { Observable } from 'rxjs-compat/Observable';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
import {MyserviceService } from './myservice.service';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { Http } from '@angular/http';
import { fromEvent, from } from 'rxjs';
import { map } from 'rxjs/operators';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'employees';
  productForm: FormGroup;
  todaydate;
  emp;m;
  information;
  mydata: any[] = [];  
  url = "http://localhost:5030/employees/delete" ;
  constructor(private http: Http, private myservice : MyserviceService,private modalService: NgbModal,private fb: FormBuilder) { }
   ngOnInit() {
    this.productForm = this.fb.group({
      Name:  ['', Validators.compose([Validators.required, Validators.minLength(3),Validators.maxLength(50)])],
      Phone:['',Validators.compose([Validators.required, Validators.minLength(10),Validators.maxLength(10)])],
      Email:['', [Validators.required, Validators.email]],
      Drop:['',Validators.required],
      Address:['',Validators.required],
      Datep:['',Validators.required],
      Dated:['',Validators.required],
      vehicle :['', Validators.required],
      Inst:['',''],

    });


      this.myservice.getdata().pipe(map((response)=>response.json())).subscribe(data=>{
        this.mydata = data.employees;
        console.log(this.mydata);
        console.log(typeof(this.mydata));
      })

        console.log("mydatqais" +JSON.stringify(this.mydata));
   }

   deleteUser(data){
    this.http.post(this.url+"/"+data._id,data).subscribe(data => {
     window.location.reload(); 
      })
     }

editUser(content){ alert("edit"); this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then(() => { alert("modalservice"); }); } }

и файл app.component.html 

<h1>Employee List</h1>
<app-create-employee></app-create-employee>
<br><b>
<ngbd-modal-basic></ngbd-modal-basic>
<div class="container-fluid">
    <span>{{item | json}}</span>
   <table>
      <tr>
          <th>Name</th>
              <th>Phone</th>
                  <th>Email</th>
                      <th>Vehicle</th>    
                      <th>Depart date</th> 
                      <th>Return date</th>   
                      <th>Drop</th>
                      <th>Instructions</th>
                      <th>Action</th>
      </tr>
      <!-- BIND ARRAY TO TABLE -->
      <tr *ngFor="let val of mydata; let i = index">   
            <td>{{val.name }}</td>
            <td>{{val.phone }}</td>
            <td>{{val.email}}</td>
            <td>{{val.vehicle}}</td>
            <td>{{val.depart }}</td>
            <td>{{val.return}}</td>
            <td>{{val.Drop}}</td>
            <td>{{val.Inst}}</td>
            <td><button id="Edit" (click) ="deleteUser(val)">Delete</button></td>
            <td><button id="Edit" (click)="editUser(val)">Edit</button></td>
     </tr>
  </table>

  <ng-template #content let-modal>
    <div class="modal-header">
        <h4 class="modal-title" id="modal-basic-title">Profile Edit</h4>
        <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
        <form [formGroup]="productForm">
            <div class="form-group">

                <div class="row">
                    <div class="col-md-2">
                        <label for="FormControlName" style="color: lightseagreen;font-size: medium;"><b>Name</b></label>
</div>
<div class="col-md-6">
    <input type="text" formControlName="Name" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
<div class="col-md-4">

    <span style="font-weight: bold;color: red;" *ngIf="!productForm.controls['Name'].valid&&productForm.controls['Name'].dirty">
          <span *ngIf="productForm.controls.Name.errors.required">Product Name is Required.</span>
    <span *ngIf="productForm.controls.Name.errors.minlength">Product name minimum should be length of 3.</span>
    <span *ngIf="productForm.controls.Name.errors.maxlength">Product name maximum should be length of 50.</span>
    </span>

</div>
<div class="col-md-4">
</div>
</div>
<br>
<div class="row">
    <div class="col-md-2">
        <label for="FormControlPhone" style="color: lightseagreen;font-size: medium;"><b>Phone</b></label>
    </div>
    <div class="col-md-6">
        <input type="text" formControlName="Phone" placeholder="Enter 10 digit Number" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
    </div>
    <div class="col-md-4">

        <span style="font-weight: bold;color: red;" *ngIf="!productForm.controls['Phone'].valid&&productForm.controls['Phone'].dirty">
                        <span *ngIf="productForm.controls.Phone.errors.required">Number is Required.</span>
        <span *ngIf="productForm.controls.Phone.errors.minlength">please enter valid 10 digit number</span>
        <span *ngIf="productForm.controls.Phone.errors.maxlength">Product name maximum should be length of 10.</span>
        </span>

    </div>

</div>
<br>
<div class="row">
    <div class="col-md-2">
        <label for="FormControlEmail" style="color: lightseagreen;font-size: medium;"><b>Email</b></label>
    </div>
    <div class="col-md-6">
        <input type="email" formControlName="Email" class="form-control" minlength="4" aria-label="Default" aria-describedby="inputGroup-sizing-default">
    </div>
    <div class="col-md-4">
        <span style="font-weight: bold;color: red;" *ngIf="!productForm.controls['Email'].valid&&productForm.controls['Email'].dirty">
              <span *ngIf="productForm.controls.Email.errors.required">please enter valid mail-Id</span>
        <span *ngIf="productForm.controls.Email.errors.minlength">Please enter valid email</span>
        <span *ngIf="email.value !== '' && email.untouched && email.invalid">mit</span>
        </span>
    </div>
</div>
<br>
<div class="row">
    <div class="col-md-6">
        <label for="FormControlVehicle" style="color: lightseagreen;font-size: medium;"><b>Which texi do you
                            require?</b></label>
    </div>
    <!-- </div>
                <div class="row"> -->
    <div class="col-md-4">
        <input type="radio" formControlName="vehicle" class="form-control" id="vehicle" value="car"> car

        <input type="radio" formControlName="vehicle" class="form-control" id="vehicle" value="taxi"> taxi

        <input type="radio" formControlName="vehicle" class="form-control" id="vehicle" value="tuk-tuk"> tuk-tuk<br>
    </div>

</div>

<br>
<div class="row">
    <div class="col-md-2">
        <label for="FormControlDate" style="color: lightseagreen;font-size: medium;"><b>Pickup-Date</b></label>
    </div>
    <div class="col-md-6">
        <input type="date" formControlName="Datep" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
    </div>
    <div class="col-md-4">
        <span style="font-weight: bold;color: red;" *ngIf="!productForm.controls['Datep'].valid&&productForm.controls['Datep'].dirty">
              <span *ngIf="productForm.controls.Datep.errors.required">Date is Required.</span>
        </span>
    </div>
</div>
<br>
<div class="row">
    <div class="col-md-2">
        <label for="FormControlDated" style="color: lightseagreen;font-size: medium;"><b>Dropoff-Date</b></label>
    </div>
    <div class="col-md-6">
        <input type="date" formControlName="Dated" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
    </div>
    <div class="col-md-4">
        <span style="font-weight: bold;color: red;" *ngIf="!productForm.controls['Dated'].valid&&productForm.controls['Dated'].dirty">
                  <span *ngIf="productForm.controls.Dated.errors.required">Date is Required.</span>
        </span>
    </div>
</div>
<br>
<div class="row">
    <div class="col-md-2">
        <label for="FormControlDrop" style="color: lightseagreen;font-size: medium;"><b>Dropoff place</b></label>
    </div>
    <div class="col-md-6">
        <input type="text" formControlName="Drop" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
    </div>
    <div class="col-md-4">
        <span style="font-weight: bold;color: red;" *ngIf="!productForm.controls['Drop'].valid&&productForm.controls['Drop'].dirty">
              <span *ngIf="productForm.controls.Drop.errors.required">Dropoff is Required.</span>
        </span>
    </div>
</div>
<br>
<div class="row">
    <div class="col-md-2">
        <label for="FormControlConditions" style="color: lightseagreen;font-size: medium;"><b>Inst</b></label>
    </div>
    <div class="col-md-6">
        <!-- <input type="textarea" formControlName="Conditions" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default"> -->
        <textarea formControlName="Inst" class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
    </div>
    <div class="col-md-4">
        <span style="font-weight: bold;color: red;" *ngIf="!productForm.controls['Inst'].valid&&productForm.controls['Inst'].dirty">
              <span *ngIf="productForm.controls.Inst.errors.required">Instructions is Required.</span>
        </span>
    </div>
</div>
<br>

</div>
<button type="button" style="margin-left: 39%;" class="btn btn-outline-success" (click)="OnSaveProduct(productForm.value)"><b>Save</b></button>
</form>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Close</button>
</div>
</ng-template>
</div>

app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component } from '@angular/core';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { RouterModule} from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CreateEmployeeComponent } from './create-employee/create-employee.component';
import {NgbdModalBasic } from './modal-basic';
import {MyserviceService} from './myservice.service';
import { HttpModule } from '@angular/http';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [
    AppComponent,
    CreateEmployeeComponent,
    NgbdModalBasic,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
    HttpModule,
    ReactiveFormsModule,
    HttpClientModule,
    RouterModule.forRoot([
      {
      path : 'router-Name',
      component :NgbdModalBasic
    }
    ])
  ],

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

Ошибка: не найдена фабрика компонентов для имени. Вы добавили его в @ NgModule.entryComponents? в noComponentFactoryError (core.js: 25606) в CodegenComponentFactoryResolver.resolveComponentFactory (core.js: 25682) в NgbModalStack._createFromComponent (нг-bootstrap.js: 7291-нг. (ng-bootstrap.js: 7113) в NgbModal.open (ng-bootstrap.js: 7440) в AppComponent.editUser (app.component.ts: 59) в Object.eval [как handleEvent] (AppComponent.html: 30)в handleEvent (core.js: 43992) в callWithDebugContext (core.js: 45631) View_AppComponent_1 @ AppComponent.html: 30 logError @ core.js: 45545 handleError @ core.js: 6066 dispatchEvent @ core.js: 29807 ()core.js: 42924 (анонимно) @ platform-browser.js: 2668 invokeTask @ zone-evergreen.js: 391 onInvokeTask @ core.js: 39679 invokeTask @ zone-evergreen.js: 390 runTask @ zone-evergreen.js: 168invokeTask @ zone-evergreen.js: 465 invokeTask @ zone-evergreen.js: 1603 globalZoneAwareCallback @ zone-evergreen.js: 1629 AppComponent.html: 30 КОНТЕКСТ ОШИБКИ DebugContext_ {view: {…}, нетdeIndex: 21, nodeDef: {…}, elDef: {…}, elView: {…}}

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...