angular5:ngFor 仅适用于第二个按钮单击答案

【问题标题】：angular5:ngFor works only in second button clickangular5:ngFor 仅适用于第二个按钮单击
【发布时间】：2018-04-22 12:58:31
【问题描述】：

我的场景如下

1) 当用户在文本字段中输入关键字并单击搜索图标时，它将发起 HTTP 请求以获取数据。

2)数据用 ngFor 渲染成 HTML

问题在于第一次单击时数据未以 HTML 格式呈现，但我正确获取了 HTTP 响应，并且仅在第二次单击时呈现数据。

component.ts

export class CommerceComponent implements OnInit {


  private dealList = [];

  //trigger on search icon click
  startSearch(){

     //http service call
     this.getDeals();
  }

  getDeals(){

     this.gatewayService.searchDeals(this.searchParams).subscribe(
      (data:any)=>{
        this.dealList = data.result;
        console.log("Deal list",this.dealList);
      },
      (error)=>{
         console.log("Error getting deal list",error);
         this.dealList = [];
         alert('No deals found');
      }
    );
  }

}

Service.ts

searchDeals(data){

   var fd = new FormData();
   fd.append('token',this.cookieService.get('token'));
   fd.append('search',data.keyword);

   return this.http.post(config.url+'hyperledger/queryByParams',fd);

}

HTML

//this list render only on second click
<div class="deal1"  *ngFor="let deal of dealList">
     {{deal}}
 </div>

更新

点击绑定html代码

 <div class="search-input">
          <input type="text" [(ngModel)]="searchParams.keyword" class="search" placeholder="" autofocus>
          <div class="search-icon" (click)="startSearch()">
            <img src="assets/images/search.png">
          </div>
        </div>

【问题讨论】：

将您的代码发布到您将“点击”事件绑定到 StartSearch() 函数的位置
当你登录this.dealList第一次点击结果是什么？
@Thangadurai 更新了我的问题
你看到第一个按钮点击时的console.log("Deal list"...吗？我在我的一个有角度的项目中尝试过，但（有趣的是）它工作得很好。
@fatemefazli 它会在第一次点击时记录结果

标签： javascript angular angular5

【解决方案1】：

根据Angular official tutorial，如果将私有属性绑定到模板，您可能会遇到问题：

Angular 只绑定到 public 组件属性。

可能将属性dealList设置为public可以解决问题。

【讨论】：

上帝的答案，但我在我的一个 Angular 项目中尝试了大多数 hist 代码片段并且它工作（与私人）。也很惊讶:-)
取决于你的 Angular 版本，如果你默认使用 AOT 编译你可能会遇到麻烦
我们需要重现该错误以更好地理解它
用这个`public dealList = [];`试过了，但还是同样的问题

【解决方案2】：

从您的 dealList 变量中删除“私有”。该声明使您的组件变量仅在编译期间可用。

另一个问题：你正在你的组件中实现 OnInit，但你没有使用 ngOnInit。在这种情况下，Angular 应该会抛出错误。

【讨论】：

【解决方案3】：

我的建议是切换到 observable：

我用 CHANGE 标记了我的更改

组件.ts

// CHANGE
import { Observable } from 'rxjs/Observable';
// MISSING IMPORT
import { of } from 'rxjs/observable/of';

export class CommerceComponent implements OnInit {
    // CHANGE
    private dealList: Observable<any[]>; // you should replace any with your object type, eg. string, User or whatever

    //trigger on search icon click
    startSearch() {
       //http service call
        this.getDeals();
    }

    getDeals() {
        this.gatewayService.searchDeals(this.searchParams).subscribe(
            (data:any)=>{
                // CHANGE
                this.dealList = of(data.result);
                console.log("Deal list",this.dealList);
            },
            (error)=>{
                console.log("Error getting deal list",error);
                // CHANGE
                this.dealList = of([]);
                alert('No deals found');
            }
        );
    }
}

HTML

<!-- CHANGE -->
<div class="deal1"  *ngFor="let (deal | async) of dealList">
    {{deal}}
</div>

【讨论】：

我在没有测试的情况下编写了这段代码，如果它不能编译或正常工作，请告诉我，我会修复它。
让我试试你的答案
用 MISSING IMPORT 更新了答案 ;-)
我还有一个Parser Error: Unexpected token (,
终于可以和这个let deal of dealList | async一起工作了，但我遇到了同样的问题:)

【解决方案4】：

试试这个：

this.dealList = Object.assign({},data.result);

最好在服务内部执行此操作。

默认情况下，角度引擎仅在识别到数据更改时才会渲染视图。

【讨论】：