Angular : How to map angular reative formcontrols with entity properties of Web API

See also questions close to this topic

• Dotnet core with Angular window is not defined

  It works fine when i run with node Express server (I use @ng-toolkit/universal) But with aspnet core node engine throwing NodeInvocation Exception Reference Error: Window is not defined in a third party modules like ngx-bootstrap and angular-jwt.

  NodeInvocationException: Prerendering failed         
  because of error: ReferenceError: window is not 
  defined
  at Object.<anonymous> 
  (C:\2ndCustomer\Angular6\node_modules\@auth0\angular- 
  jwt\bundles\core.umd.js:1:704)
  

  And ngx-bootstrap error but when i run with express server.ts it works fine https://github.com/maciejtreder/ng-toolkit
• how use NGXS with in mat-table DataSorce

  I use trying to use ngxs state managment pattern with angular material tables, but I don't know how to do it... Can anyone help?

    export class JobsComponent implements OnInit {
   public  dataSource = new JobsDataSource(this.jobsServise);
   //@Select(HomeState.jobs) public jobs$: Observable<boolean>
    displayedColumns = ['number', 'date', 'mawb', 'origin', 'destination', 'other'];
    constructor(
      private jobsServise: JobsService,
      private store: Store) {
  
     }
    ngOnInit() {
     // this.store.dispatch( new GetJobs());
    }
  }
  
  export class JobsDataSource extends DataSource <any> {
    public jobs: IJobs[];
  
    constructor(private jobsServise: JobsService){
      super();
    }
    public connect(): Observable<IJobs[]>{
     return this.jobsServise.getJobs();
    }
    public disconnect(){}
  }
  
• Leaflet map container is not found

  I"m trying to display a Leaflet Map in my angular component that is retreiving a Bank Agency Details.

  I'm receiving this error :

  ERROR Error: Map container not found.

  Here's my component:

  import { Component, OnInit, Input } from '@angular/core';
  import { RestService } from '../providers/rest.service';
  import { SnotifyService } from '../../../node_modules/ng-snotify';
  import { NgForm } from '../../../node_modules/@angular/forms';
  import { Router, ActivatedRoute } from '@angular/router';
  
  declare let L;
  @Component({
    selector: 'app-modify-bank',
    templateUrl: './modify-bank.component.html',
    styleUrls: ['./modify-bank.component.css']
  })
  export class ModifyBankComponent implements OnInit {
    bank:any;
    bank_id:string;
    latitude:Number;
    longitude:any;
  
    constructor(
      private restService :RestService,
      private snotifyService: SnotifyService,
      private router:Router,
      private activatedRoute: ActivatedRoute,
      ) { 
        this.activatedRoute.params
        .subscribe( params => {
          this.bank_id = params.bank_id;
          this.getBankByID(params.bank_id);
        })    
    }
  
    ngOnInit() {
      this.addMap()
    }
  
    getBankByID(bank_id:string){
      this.restService.getBankByID(bank_id).subscribe((data:any) => {
        this.bank = data.bank;
        console.log(this.bank);
      } , err => {
        console.log(err);
      });
    }
  
    addMap(){
  
      let map = L.map('map').setView([36.798854, 10.152786], 8);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);
      var Marker;
      map.on('click',(e) =>                                                                                                                                                         {
        let latlng = map.mouseEventToLatLng(e.originalEvent);
  
        console.log(latlng.lat + ', ' + latlng.lng);
        //remove previous markers
        if (Marker) {
          map.removeLayer(Marker);
        }
        // Add marker to map at click location; add popup window
  
        Marker = new L.marker(e.latlng, {
          draggable: true,
          icon: L.icon({
            iconSize: [ 25, 41 ],
            iconAnchor: [ 13, 41 ],
            iconUrl: 'assets/leaflet/images/marker-icon.png',
            shadowUrl: 'assets/leaflet/images/marker-shadow.png'
          }),
        }).addTo(map);
      });
  
    }
  
  
  
  
  }
  

  The html template contains a form to bind with the agency name and address, what I'm trying to achieve later on, is display a marker in the coordinates of the map. But I keep getting Map container not found. Any help would be appreciated. Thank you!
• Automatically update ID value for records retrieved

  So, consider the following class:

  public class Solution
  {
      [Key]
      public int Id { get; set; }
  
      public string Name { get; set; }
  }
  

  And the following methods

  public void DoSomething()
  {
      new Item originalItem = new Item();
      item.Name = "Test";
  
      InserIntoDb(originalItem);
  
      Assert.True(item.Id != 0);
  }
  
  public void InserIntoDb(Item item)
  {
      context.Item.Add(item);
      context.SaveChanges();
  }
  

  On this case, after insert into the db, EF automatically updates the originalItem with its auto generated ID value.

  My problem starts when I add some logic to only add to the db if the Name doesn't exist. If exists the Insert doesn't happen therefore the ID property is not populated.

  My question is: Is there a way to make the context.Item (when retrieving all) to automatically update the ID of the originalItem value without having to change the InsertIntoDb method to return an Item and consequently having to add a line like

  originalItem = InsertIntoDb(originalItem);
  

  Thanks, in advance
• Foreign key Entity Framework - code first migrations

  I have a problem with my entities. I'm using EF code-first migrations and the migrations are failing with this error:

  Introducing FOREIGN KEY constraint 'FK_OrdersChildsProducts_Orders_OrderId' on table 'OrdersChildsProducts' may cause cycles or multiple cascade paths. Specify ON DELETE NO ACTION or ON UPDATE NO ACTION, or modify other FOREIGN KEY constraints.

  Here's my PersonJceProfile entity :

  [Table("PersonJceProfiles")]
  public class PersonJceProfile : BaseEntity
  {
      [ForeignKey("Ces")]
      public int? CeId { get; set; }
      public ICollection<Child> Children { get; set; }
      public Order Order { get; set; }
      public PersonJceProfile()
      {
          Children = new List<Child>();
      }
  }
  

  Here's my Order entity :

  [Table("Orders")]
  public class Order : BaseEntity
  {
      [Key]
      public int Id { get; set; }
  
      //ForeignKey
      [Required]
      [ForeignKey("PersonJceProfiles")]
      public int PersonJceProfileId { get; set; }
      [Required]
      public int OrderStatus { get; set; }
      [Required]
      public bool IsSecurePayment { get; set; }
      public int LeftToPayPersonOrder { get; set; }
      public string Delivery { get; set; }
  
      public ICollection<OrderChildProduct> OrderChildProduct { get; set; }
  
      public Order()
      {
          OrderChildProduct = new Collection<OrderChildProduct>();
      }
  }
  

  Here's my Child entity :

  [Table("Childrens")]
  public class Child :BaseEntity
  {
      [Key]
      public int Id { get; set; }
      [Required]
      public string FirstName { get; set; }
  
      [Required]
      public string LastName { get; set; }
  
      [Required]
      public DateTime? BirthDate { get; set; }
  
      [Required]
      public string Gender { get; set; }
  
      public bool? IsActif { get; set; }
  
      public decimal AmountParticipationCe { get; set; }
  
      public bool? IsRegrouper { get; set; }
  
      [Required]
      [ForeignKey("PersonJceProfiles")]
      public int PersonJceProfileId { get; set; }
  }
  

  Here's my Product Entity

  public class Product : Good
  {
      public string File { get; set; }
      public bool? IsDisplayedOnJCE { get; set; }
      public bool? IsBasicProduct { get; set; }
      public int? PintelSheetId { get; set; }
      public int OriginId { get; set; }
  
      [Required]
      [ForeignKey("Suppliers")]
      public int SupplierId { get; set; }
  
  }
  

  Here's my OrderChildProduct entity :

   [Table("OrdersChildsProducts")]
  public class OrderChildProduct
  {
      public int OrderId { get; set; }
      public int ChildId { get; set; }
      public int ProductId { get; set; }
      public int LeftToPayChildOrder { get; set; }
  
      public Order Order { get; set; }
      public Child Child { get; set; }
      public Product Product { get; set; }
  
  }
  

  Here's my context :

  modelBuilder.Entity<OrderChildProduct>().HasKey(ccp => new { ccp.OrderId, ccp.ChildId, ccp.ProductId });
  

  I suppose i do destro a relationship like this :

  modelBuilder.Entity<Entity>()
  .HasRequired(c => c.ForeignKey)
  .WithMany()
  .WillCascadeOnDelete(false);
  

  but I can't see between which. Because

  • When I delete PersonJceProfiles : Order must be deleted - OrderChildProduct must be deleted - Child must be deleted

  • When I delete Order : OrderChildProduct must be deleted

  • When I delete Order childProduct : nothing must be deleted expect himself

  What am I doing wrong? Thanks
• Entity Framework code first database not synced with models

  We are a small team that uses Entity Framework as our object-relational mapping (ORM) framework. We use git as source control and in our latest sprint we have had database changes in two separate branches. Nothing out of the ordinary there.

  However we can usually get a correct model snapshot by adding a blank "merge" migration.

  https://docs.microsoft.com/en-us/ef/ef6/modeling/code-first/migrations/teams#option-1-add-a-blank-merge-migration

  However in our latest merge something really weird has happened. Our models and the database are out of sync. The given model below has a composite primary key of five properties.

  public class NotifiedEvent
  {
      [Key, Column(Order = 0)]
      [DatabaseGenerated(DatabaseGeneratedOption.None)]
      [MaxLength(15)]
      public string BusinessSystemId { get; set; }
  
      [Key, Column(Order = 1)]
      [DatabaseGenerated(DatabaseGeneratedOption.None)]
      public int CaseId { get; set; }
  
      [Key, Column(Order = 2)]
      [DatabaseGenerated(DatabaseGeneratedOption.None)]
      [MaxLength(5)]
      public string Action { get; set; }
  
      [Key, Column(Order = 3)]
      [DatabaseGenerated(DatabaseGeneratedOption.None)]
      public int Cycle { get; set; }
  
      [ForeignKey("BusinessSystemId,CaseId,Action,Cycle")]
      public virtual TPRenewalCycle TPRenewalCycle { get; set; }
  
      [Key, Column(Order = 4)]
      [ForeignKey("TPEvent")]
      [DatabaseGenerated(DatabaseGeneratedOption.None)]
      public int EventNo { get; set; }
  
      public virtual TPEvent TPEvent { get; set; }
  
      [ForeignKey("BusinessSystemId,CaseId,Action,Cycle,EventNo")]
      public virtual TPCaseEvent TpCaseEvent { get; set; }
  
      public int NotifiedBatchId { get; set; }
  
      public virtual NotifiedBatch NotifiedBatch { get; set; }
  
      [Key, Column(Order = 5)]
      public DateTime EventDate { get; set; }
  
      public DateTime Created { get; set; }
  
      public DateTime Updated { get; set; }
  }
  

  In the database there are however a composite primary key of six columns. I know this has been edited but I can't find the migration for it now.

  

  When I try to create a new migration it looks like this:

  public partial class RemoveDueDatefromNotifiedEvent : DbMigration
  {
      public override void Up()
      {
      }
  
      public override void Down()
      {
      }
  }
  

  If I add the DueDate key to the model again entity framework tries to add the existing key to the database again.

  [Key, Column(Order = 6)]
  public DateTime DueDate { get; set; }
  

  Migration:

  public partial class RemovedDueDatefromNotifiedEvent : DbMigration
  {
      public override void Up()
      {
          DropPrimaryKey("dbo.NotifiedEvents");
          AddColumn("dbo.NotifiedEvents", "DueDate", c => c.DateTime(nullable: false, precision: 0, storeType: "datetime2"));
          AddPrimaryKey("dbo.NotifiedEvents", new[] { "BusinessSystemId", "CaseId", "Action", "Cycle", "EventNo", "EventDate", "DueDate" });
      }
  
      public override void Down()
      {
          DropPrimaryKey("dbo.NotifiedEvents");
          DropColumn("dbo.NotifiedEvents", "DueDate");
          AddPrimaryKey("dbo.NotifiedEvents", new[] { "BusinessSystemId", "CaseId", "Action", "Cycle", "EventNo", "EventDate" });
      }
  }
  
• Changes in HTML not reflected in browser

  So I am creating a web application using Angular 6, net core 2.1, ef core 2.1... I had built the front end, however--now the behavior that I am experiencing is that when I change any of my HTML code, the changes are not reflected inside of the browser.

  Some things I have tried:

  1. Comment everything out. Effect: Nothing changes in browser.
  2. Change the filename of the HTML. Effect: breaks the web application.
  3. Change filename back to normal, delete all html code. Effect: Application working again, still showing old content.
  4. Clean browser cache. Effect: None
  5. Force refresh (Control f5). Effect: None.

  Does this sound familiar to anyone?
• How work directives lifecycle sequence when one directive located inside another directive in Angular 6?

  In component I have two directive:

  @Directive({
      selector: '[ng-parent]'
  })
  export class Parent implements OnInit, AfterViewInit {
      public ngOnInit(): void {           
          console.log('parent.directive:ngOnInit');
      }
  
      ngAfterViewInit() {
          console.log('parent.directive:ngAfterViewInit');
      }
  }
  
  @Directive({
      selector: '[ng-child]'
  })
  export class Child implements OnInit, AfterViewInit {
      public ngOnInit(): void {           
          console.log('child.directive:ngOnInit');
      }
  
      ngAfterViewInit() {
          console.log('child.directive:ngAfterViewInit');
      }
  }
  

  On main.component I use directives like this:

  <div ngParent>
      <ng-template ngFor let-row [ngForOf]="arrRows">
          <div>
              <ng-template ngFor let-field [ngForOf]="arrFields">
                  <div ngChild></div>
              </ng-template>
          </div>
      </ng-template>
  </div>
  

  Console display result init sequence:

  main.component:ngOnInit
  ng-parent.directive:ngOnInit
  ng-parent.directive:ngAfterViewInit
  main.component:ngAfterViewInit
  ng-child.directive:ngOnInit
  ng-child.directive:ngAfterViewInit
  

  I simplify code. I guess probles is ng-template in ng-template. As I understand lifecycle sequence should be different. I need result init lifecycle directives sequence like this:

      main.component:ngOnInit
      ng-parent.directive:ngOnInit
      ng-child.directive:ngOnInit
      ng-child.directive:ngAfterViewInit
      ng-parent.directive:ngAfterViewInit
      main.component:ngAfterViewInit
  
• Problem collection in angular 6 using firestore

  this.afDB.collection('places/' + place.id ).add(place);  
  

  I have problem in collection ( ' places ' + place.id )

  Place was added, but the collection came out place1537547932547 and I want it to come out in the folder place

  Error in console : Collection references must have an odd number of segments