Angular5花括号报错

想做一个todolist未完成和已完成事件的小功能，结果页面报错。实现事情的简单添加，删除改变状态功能。

模板代码：

<p>
  todolist works!
</p>
<p>遗留问题：1、ngfor遍历过滤 2、读取当前显示对象</p>
<p>  *ngFor="let item of alreadylist |fliter:{alreadylist.status:2};let i=index;"</p>

<!--实现回车键添加事件，keyup事件监听，传入参数-->
<input type="text" [(ngModel)]= 'todothing' (keyup)="keyaddData($event)" >

<button (click)="adddata()">添加事件</button>
<br>

<h2>正在进行</h2>
<ul> 
  <li *ngFor="let item of list;let i=index;" [hidden]="item.status==2">
    <button (click)="changeStatus(i,2)" >改变状态</button>
    {{item.status}} -- {{item.todothing}}   <button (click)="deleteData(i)">删除本条</button>
  </li>
</ul>

组件ts代码：

export class TodolistComponent implements OnInit {

public todothing: any = '';  // 赋值为空
public list = [];
public alreadylist = [];


// 依赖注入服务
constructor(private storage: StorageService) {

  }

 ngOnInit() {
   // 每次刷新获取storage里面的todolist的值

   const todolist = this.storage.getItem('todolist');
      if (todolist) {

        this.list = todolist;
      }
      console.log(110);
 }

// 键盘回车，添加事件
  keyaddData(e) {
    if (e.keyCode === 13) {
      this.adddata();
    }
  }

// 添加事件
  adddata() {
    // 1.从storage获取 todolist的数据
    // 2.如果有数据，拿到这个数据然后把新数据和storage3  数据拼接
    // 3.如果没有数据，直接给storage写入数据

    console.log(113);

    /*每次增加的一个对象数据*/
    const obj = {
      todothing: this.todothing,
      status: 1
    };

    const todolist = this.storage.getItem('todolist');
    if (todolist) {/* 判断一个数组中是否存在数据*/
      todolist.push(obj);
        this.storage.setItem('todolist', todolist);
    } else {
      const arr = [];
      arr.push(obj);
      this.storage.setItem('todolist', arr);
    }

     this.list.push(obj);
     console.log(112);
  }

  deleteData(key) {
    this.list.splice(key , 1);
  }

// 改变事件状态
  changeStatus(key, status) {
    // this.todolist.splice(key , 1);
    // this.alreadylist.push(obj);
    this.list[key].status = status;
  }
}

报错内容：

compiler.js:485 Uncaught Error: Template parse errors:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("{item.status}} --{{item.todothing}}   <button (click)="deleteData(i)">删除本条</button>
    </li>
  </ul>[ERROR ->]"): ng:///AppModule/TodolistComponent.html@26:7
Invalid ICU message. Missing '}'. ("index;" [hidden]="item.status==1">
        <button (click)="changeStatus(i,1)" >改变状态</button>
      [ERROR ->]{{item.status}} --{{item.todothing}}   <button (click)="deleteData(i)">删除本条</button>
    </li>
  </ul"): ng:///AppModule/TodolistComponent.html@24:6

解决办法：

去掉<p>标签中的当做文字内容显示的花括号。

问题原因：

他是关键字呗。。。。。

在页面中显示双花括号(单花括号不适用)：

1.指定非绑定区域

<p ngNonBindable>{{ 'abc' }}</p>

输出：

{{ 'abc' }}

2. 把绑定关键字本身作为数据内容

<p>{{ foo }}</p>
class T {
  foo = `{{ 'abc' }}`
}

Angular 不仅仅（默认）将 双花括号 用于 数据绑定，还（强制）将 单花括号 用于ICU format。

所以在双花括号不用于数据绑定之后，花括号仅仅被用于 ICU format 中，导致解析错误。

单花括号：

如果要写 { , 就在代码里面写成 {{ '{' }}，同样的，要写 } 就在代码里写成 {{ '}' }}