Question

我们正在尝试将数据对象中的内容放置在行和列中。但是，屏幕显示为空，并且在控制台上，当我们检查错误时，它表示未捕获的错误，但是我们很困惑地找出哪些行完全错误以及如何修复它们。键入脚本部分就可以了。似乎所有错误都在组件的HTML部分中。这是代码：

<div class="container justify-content-center">
<div class="row row row-centered justify-content-center" *ngFor="let restaurant of restaurants; let i = index" *ngIf="i % 3 == 0">
      <div class="col-md-3 centered col-md-offset-1">
        <span>
        <img
          [src]="restaurant.imagePath"
          alt="{{ restaurant.name }}"
          class="img-responsive"
          style="max-height: 300px; width:100%;">
      </span>
          <h2>{{restaurant.name}} </h2>
          <h2>{{restaurant.category}} </h2>
          <p>{{restaurant.description}} </p>
         </div>
        <div class="col-md-3 centered col-md-offset-1">
        <span>
        <img *ngIf="restaurants[$index + 1].imagePath != null" [src]="restaurant[i +
              1].imagePath"
          class="img-responsive"
          style="max-height: 300px; width:100%;">
      </span>
          <h2 *ngIf="restaurants[$index + 1].name != null">{{restaurants[i +
              1].name}} </h2>
          <h2*ngIf="restaurants[$index + 1].category != null">{{restaurants[i +
              1].category}} </h2>
              <p *ngIf="restaurants[$index + 1].description != null">{{restaurants[i +
              1].description}} </p>

      </div>
         <div class="col-md-3 centered col-md-offset-1">
        <span>
        <img *ngIf="restaurants[$index + 2].imagePath != null" [src]="restaurant[i +
              2].imagePath"
          class="img-responsive"
          style="max-height: 300px; width:100%;">
      </span>
          <h2*ngIf="restaurants[$index + 2].name != null">{{restaurants[i +
              2].name}} </h2>
          <h2*ngIf="restaurants[$index + 2].category != null">{{restaurants[i +
              2].category}} </h2>
              <p *ngIf="restaurants[$index + 2].description != null">{{restaurants[i +
              2].description}} </p>
                       </div>
      </div>

  </div>
</div>

怎么了？我们如何解决这些错误并使其在浏览器中显示该组件？

Answer 1

我认为这会很好地工作：

var $prodBut=$('#prodButton');

    $prodBut.click(function(){
    $('main').load('products2.html main > *');
    });

Answer 2

在HTML模板中，您在同一元素上使用了 ngFor 和 ngIf ，但是根据angular documentation，每个主机只能使用一个结构指令元素

您可以按照ngFor syntax使用以下语法，并在 ng-template

内的div上使用 ngIf

<ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
  <div>...</div>
</ng-template>

对于列基础布局，您可以做的是为列创建一个组件，并将饭店数据作为输入传递给它。如下所示，在您的html中使用此新组件三遍：

// Component
public items = new Array(Math.round(this.restaurents.length/3));

//Template

<ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
  <my-col [data]="itmes[i*3]" ngIf="itmes[i*3]">...</my-col>
  <my-col [data]="itmes[i*3 + 1]" ngIf="itmes[i*3 + 1]">...</my-col>
  <my-col [data]="itmes[i*3 + 2]" ngIf="itmes[i*3 + 2]">...</my-col>
</ng-template>

页面显示为空，而组件有许多元素要显示在屏幕上

2 个答案: