An element access expression should take an argument

Question

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 (https://stackblitz.com/angular/ooqemvjyqkb?file=src%2Fapp%2Fheroes%2Fheroes.component.ts) 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);
      });
  }
}

////////////////////user.ts///////////////

export class User {
    id: number;
    name: string;
  }

///////////////user.service.ts////////////////

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

}

Answer 1

Replace

users = User[];

with

user: User[]

That should do the trick.