Javascript Angular5:渲染列表时出现Obesrvables错误

我正在努力学习用angular5观察

Component.ts文件

export class CommerceComponent implements OnInit {

public List$: Observable<any>;

getData(id){

 this.List$ = this.gateway.search(id);

  }
}

HTML

{{item}}

但是我的控制台中出现了以下错误

错误类型错误：无法读取null的属性“length” at Object.eval[作为updateDirectives]

---

在从observable获取任何数据之前，您正在尝试检查

ngIf

中的

length

属性。您应该将解析的

async

值存储到变量中，然后访问属性

---

在文档中选中此项：

将ngIf的条件从

*ngIf=“（List$| async）.length”

更改为

*ngIf=“List$”

后重试，或者在条件允许时删除

search(id){


        var fd = new FormData();
        fd.append('token',this.cookieService.get('token'));
        fd.append('search',id);
         return this.http.post(config.url+'search',fd).map((res: Response) => res.json())

}

<div class="deal-boxes" *ngIf="(List$ | async).length">
      <div class="deal1"  *ngFor="let  item of List$ | async">{{item}}
    </div>
    </div>