CODEWITHSUNDEEP
angularangular4-forms
ConorDorrian
ConorDorrian

Reputation: 21

Angular error: The left-hand side of an assignment expression must be a variable or a property access

Do not understand or know how to fix this error.

This is the code. It seems to be something to do with pushItem function i think. 

> **app.component.ts**

import { Component, NgModule } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  //bind this array to li in html
  items = ['Sistema', 'Playstation', 'Web'];

  newItem = '';

  pushItem = function() {
    if(this.newItem ! = ''){
      this.items.push(this.newItem);
      this.newItem = '';
    }
  }


}
@import '~font-awesome/css/font-awesome.css';

.main{
    width: 500px;
    text-align: center;
    margin: 0 auto;
    border: 2px solid #d7d7d7;
    border-bottom: 0px;
    margin-top: 20px;
    font-family: sans-serif;
}

h1{
    text-align: center;
    background-color: #5c8297;
    padding: 30px 0px;
    margin-top: 0px;
    color: #f7f7f7;
}

.addItem{
    position: relative;
    padding-bottom: 0px;
    height: 30px;
}

.addText{
    width: 80%;
    height: 30px;
    padding: 5px;
    font-size: 20px;
}

 button{
    height: 45px;
    width: 50px;
    padding: 5px;
}

ul{
    list-style: none;
    font-size: 20px;
    color: #686868;
    margin-left: -40px;
    margin-bottom: 0px;
}

li{
    border-bottom: 1px solid #bfbfbf;
    background: #d7d7d7;
    padding: 10px 0px;
    margin-bottom: 5px;
}

span{
    cursor: pointer;
    position: relative;
    float: right;
    margin-right: 15px;
}
> **app.component.html**

<div class = 'main'> 
  <h1>Item List</h1>
  <div class = 'add'>
    <input [(ngModel)] = 'newItem' placeholder="add item" class = 'addText'>
    <button>Add</button>
  </div>
  <ul>
    <Li *ngFor = 'let i of items'>
      {{i}} 
      <span><i class="fa fa-times" aria-hidden="true"></i></span>
    </Li>
  </ul> 
</div>

Error nessage

Upvotes: 2

Views: 28667

Answers (2)

user15776471
user15776471

Reputation: 11

Try making newItem = [] from newItem = ''. And also try to modify your pushItem = function() because it is not getting the newItem in that. Also, in latest versions of angular, [(ngModel)] is not bind since it is not known property . So make it [value].

Upvotes: 0

Ludwig
Ludwig

Reputation: 1272

I think you should replace 

if(this.newItem ! = ''){

by 

if(this.newItem != ''){

There is a space between ! and =

Upvotes: 4

Related Questions