Javascript 角度5:ngFor仅在第二次单击按钮时有效

我的设想如下

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

2使用ngFor以HTML格式呈现数据

问题是在第一次单击时，数据没有以HTML呈现，但我得到了正确的HTTP响应，并且数据仅在第二次单击时呈现

组件技术

// 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

更新

单击“绑定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>

试试这个：

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

最好在服务内部这样做

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

根据，如果将私有属性绑定到模板，则可能会出现问题：

角度仅绑定到公共组件属性

---

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

从dealList变量中删除private。该声明使组件变量仅在编译时可用

---

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

我的建议是切换到observable：

我用零钱标记我的变化

组件技术

// 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

---

在第一次单击中记录this.dealList时，在将“click”事件绑定到StartSearch函数的位置发布代码。结果如何？@Thangadurai更新了我的问题您是否看到console.logDeal列表。。。在第一个按钮上单击？我在我的一个angular项目中尝试过它，但有趣的是，它工作得很好。@fatemefazli它将在第一次点击上帝答案时记录结果，但我在我的一个angular项目中尝试了大部分历史代码片段，它与private一起工作。我也很惊讶：-取决于你的角度版本，如果你默认使用AOT编译，你可能会遇到麻烦。我们需要复制这个bug来更好地理解它。使用这个“public dealList=[]；”但是仍然是同样的问题我没有测试就写了这段代码，如果它不能正确编译或工作，请告诉我&我会修复它-我遇到了另一个语法分析器错误：意外的令牌，最后它与此let deal-deal-list | async一起工作，但我遇到了相同的问题：

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

// 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');
            }
        );
    }
}

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