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}`);
}
}

5

6 Answers

Replace

users = User[];

with

user: User[]

That should do the trick.

2

The correct syntax for me was not

user: User[] = User[] // WRONG SYNTAX

but

users: User[] = []

or

users: User[] = new Array<User>()

0

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

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.