I am new to Angular I have tried to create some sample application but getting error. Please help. I am trying to make my own from googles project ()
When I remove array from users = User[]; it works fine but it does not give a build. ([ts] Type 'User[]' is not assignable to type 'typeof User'). With users = User[]; it does not even compile. (suggestion [ts] An element access expression should take an argument.(any)) .
import { Component, OnInit } from '@angular/core';
import { User } from '../user';
import { UserService } from '../user.service';
@Component({ selector: 'app-users', templateUrl: './users.component.html', styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit { selectedUser: User; users = User[]; // review use of array type. users = User[]; constructor( private userService: UserService ) { } ngOnInit() { this.getUsers(); } onSelect(user: User): void { this.selectedUser = user; } getUsers(): void { this.userService.getUsers() .subscribe(users => this.users = users); } save(): void { this.userService.updateUser(this.users); } add(name: string): void { console.log(name); name = name.trim(); if (!name) { return; } this.userService.addUser({ name } as User) .subscribe(user => { this.users.push(user); }); }
}////////////////////
export class User { id: number; name: string; }///////////////
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { User } from './user';
// import { USERS } from '../assets/data/userData';
const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
@Injectable({ providedIn: 'root' })
export class UserService { private usersUrl = 'api/users'; constructor( private http: HttpClient) { } getUsers(): Observable<User[]> { // return of(USERS); return this.http.get<User[]>(this.usersUrl); } /** GET user by id. Will 404 if id not found */
getUser(id: number): Observable<User> { const url = `${this.usersUrl}/${id}`; return this.http.get<User>(url);
}
/** PUT: update the user on the server */
updateUser (user: User): Observable<any> { return this.http.put(this.usersUrl, user, httpOptions);
}
/** POST: add a new user to the server */
addUser (user: User): Observable<User> { return this.http.post<User>(this.usersUrl, user, httpOptions);
}
/* GET users whose name contains search term */
searchUsers(term: string): Observable<User[]> { if (!term.trim()) { // if not search term, return empty hero array. return of([]); } return this.http.get<User[]>(`${this.usersUrl}/?name=${term}`);
}
}6 Answers
Replace
users = User[];with
user: User[]That should do the trick.
2The correct syntax for me was not
user: User[] = User[] // WRONG SYNTAXbut
users: User[] = []or
users: User[] = new Array<User>()Try:
users = [Users];I find that syntax tends to work better.
I just ran into this trying to compile a standalone typescript file with tsc. In my case I had to change this:
users: User[];to this:
let users: User[];As some people wrote before, you try to add User[] which is an array to a method that only needs one single user. You access one element of an arry, by writing the following code:
save(): void { this.userService.updateUser(this.users[THE_INDEX_FROM_THE_CURRENT_USER]);
}That should only give one User to the updateUser()
So in general:
oneArray: Foo[]; <- creates an array named 'oneArray' with Foo objects inside
oneFoo = oneArray[0]; <- Gives you the first element of the array do not adding users = User[], as you are getting users from service. instead just declare the type like users: User[];
Above will work
