An Element Access Expression Should Take an Argument
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...
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.
The correct syntax for me was not
user: User[] = User[] // WRONG SYNTAX
but
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