Question

在我的角度2应用程序中，我有一些项目的数组。我期待只有1个div与ngFor，但它的第9代空div。

component.html

<div class="row">
    <div *ngFor="let item of items" class="col-sm-6 col-md-12">
      <div class="card card-accent-primary">
        <div class="card-block">
          <div class="row">
            <div class="col-md-9">
               {{item.title}}
            </div>
            <div class="col-md-3">
                <p style="text-align: right;"><i class="fa fa-calendar fa-sm"></i>&nbsp;{{item.dateAjout}}</p>
            </div>
          </div>
            <hr>
          <p>{{item.description}}</p>
        </div>
      </div>
    </div><!--/.col-->
</div>

这是我的组件.ts：

export class OffresEntrepriseComponent implements OnInit {
  private subscription: Subscription;
  private offreIndex: number;
  items: any[] = [];

  constructor(private route: ActivatedRoute, private myService: MyServiceService) { }

  ngOnInit() {
    this.subscription = this.route.params.subscribe(
      (params: any) => {
         this.offreIndex = params['id'];
        });
        this.myService.getOffreById(this.offreIndex)
        .subscribe(
          data => {
            const myArray = [];
            for (let key in data) {
                myArray.push(data[key]);
                console.log(data[key]);
            }
            this.items = myArray;
          }
        );}}

最后我的服务：

public getOffreById(id: number): any{
    return this.http.get(this.url+"/Offres/"+id)
      .map((data: Response) => data.json());
}

我做错了什么？

Answer 1

试试这个：

ngOnInit() {
this.subscription = this.route.params.subscribe((params: any) => {
    this.offreIndex = params['id'];
    this.myService.getOffreById(this.offreIndex)
    .subscribe(
      data => {
        this.items = myArray;
      }
    );
 }
}

您可能还必须在同一组件上实现OnChanges。

ngOnChanges(){
   this.ngOnInit();
}

如果仍然无效，请尝试使用

ngOnInit() {
  this.route.params.subscribe(params=> {
    let searchStr = params['id'];  
    this.productQuery = new ProductQuery(searchStr, 'sub-category', 'computers', 
    false, 'electronic');
  window.scrollTo(0, 0);  
});

} }

以上代码是我在我的产品中搜索产品时所显示的代码，它在我的代码中有效。如果需要，将其添加到构造函数中：constructor（private route：ActivatedRoute）{}。我希望这有帮助。祝你有愉快的一天。

Angular 2 ng用于提供比预期更多的迭代

1 个答案: