I need to display all the names I have written in the table in the Angular field

Question

I need to display all the names I have written in the table in the Angular field.

I have DB:

CREATE TABLE [dbo].[Sellers](
    [Id] [int] IDENTITY(1,1) PRIMARY KEY NOT NULL,
    [Login] [varchar](50) NOT NULL,
    [Password] [varchar](50) NOT NULL,
    [Name] [nchar](50) NOT NULL,
    [Address] [nchar](50) NOT NULL,
    [Email] [varchar](50) NOT NULL,
    [RegistrationDate] [datetime] NOT NULL,
)
GO

I am requesting ASP web API to bring all the names from the table:

    public class SellersController : ApiController
        {
            [HttpGet]
            public async Task<IHttpActionResult> GetNames(string name)
            {
                using (var dataBaseContext = new DataBaseContext())
                {
                    var query = from seller in dataBaseContext.Sellers
                                where
                                seller.Name == name
                                select seller;
                    return Ok(await query.ToListAsync());
                }
            }
        }

I'll bring it to the angular. But it is not displayed and generally cries out the code:

       import { Sellers } from './sellers.model';
    import { Injectable } from '@angular/core';

    @Injectable({
      providedIn: 'root'
    })
    export class SellersService {

      formData : Sellers;

      constructor() { }
    }

    ________________
    <div class="p-3 px-md-4 mb-3 bg-white">
        <input name="Sellers" #Sellers="ngModel"[(ngModel)] = "service.formData" class="form-control">
    </div>

Nothing is displayed and the last line of the code issues an error

Can't bind to 'ngModel' since it isn't a known property of 'input'.Angular

UPD:

import { SellersService } from './shared/sellers.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TopRegionComponent } from './components/top-region/top-region.component';
import { LeftRegionComponent } from './components/left-region/left-region.component';
import { BottomRegionComponent } from './components/bottom-region/bottom-region.component';
import { CenterRegionComponent } from './components/center-region/center-region.component';
import { UserComponent } from './components/user/user.component';

const appRoutes: Routes = [
  {path: '', component: AppComponent},
  {path: 'user', component: UserComponent},
  {path: 'left-region', component: LeftRegionComponent},
  {path: 'top-region', component: TopRegionComponent},
  {path: 'bottom-region', component: BottomRegionComponent},
  {path: 'center-region', component: CenterRegionComponent},
]

@NgModule({
  declarations: [
    AppComponent,
    TopRegionComponent,
    LeftRegionComponent,
    BottomRegionComponent,
    CenterRegionComponent,
    UserComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot(appRoutes),
    HttpModule,
    FormsModule
  ],
  providers: [SellersService],
  bootstrap: [AppComponent]
})
export class AppModule { }

UPD2:

import { SellersService } from './../../shared/sellers.service';
import { Component, OnInit } from '@angular/core';
import {Http} from '@angular/http';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'left-region',
  templateUrl: './left-region.component.html',
  styleUrls: ['./left-region.component.css']
})
export class LeftRegionComponent implements OnInit {

  constructor(private service : SellersService)
   {
   }

  ngOnInit() {
  }

}

You need to declare variable you want to use in HTML Page @Vova Makarovych — Sameer, Jul 26 '19 at 08:49
@Sameer You can give us an example of how to properly declare. I also need to name a lot. all declare? — Vova Makarovych, Jul 26 '19 at 08:53
The error means that you have to `import { FormsModule } from '@angular/forms';` in your module. Taka a look [here](https://stackoverflow.com/questions/38892771/cant-bind-to-ngmodel-since-it-isnt-a-known-property-of-input). — riorudo, Jul 26 '19 at 08:57
Your can refer angular from following link. [RefLink](https://angular.io/docs) — Sameer, Jul 26 '19 at 09:00
@riorudo UPD see but the mistake is still and remains. I'm not there about the Importation? — Vova Makarovych, Jul 26 '19 at 09:11
Where is your associated component code for the provided HTML template? You have provided the service code. — Robin Webb, Jul 26 '19 at 09:16
@RobinWebb photo error - https://a.radikal.ru/a28/1907/2a/c8d277cefa8c.png — Vova Makarovych, Jul 26 '19 at 09:47
@RobinWebb I wrote int Stackvlitz in my code - https://stackblitz.com/edit/angular-caqpw2 — Vova Makarovych, Jul 27 '19 at 06:22

score 0 · Answer 1 · answered Jul 26 '19 at 08:59

0

I have given an example for your query kindly look into it.

import { Sellers } from './sellers.model';
import { Injectable } from '@angular/core';

@Injectable({
   providedIn: 'root'
})
export class SellersService {
   formData : Sellers;
   seller : Sellers = new Sellers();
   constructor() { }
}

HTML

<div class="p-3 px-md-4 mb-3 bg-white">
<input name="Sellers" #Sellers="ngModel" [(ngModel)]= "seller.Name" class="form-control">
</div>

answered Jul 26 '19 at 08:59

Sameer

131
1
9

@Sammer I wrote int Stackvlitz in my code - https://stackblitz.com/edit/angular-caqpw2 – Vova Makarovych Jul 27 '19 at 07:06
@Sammer I look at that link on the touristic that you threw. but I did not find out how to torture me in this case ((( – Vova Makarovych Jul 27 '19 at 07:08

I need to display all the names I have written in the table in the Angular field

1 Answers1