自定义组件内的离子网格答案

【问题标题】：Ionic Grid Inside Custom Component自定义组件内的离子网格
【发布时间】：2018-09-08 05:31:02
【问题描述】：

我正在使用 Ionic 4 并尝试在我的自定义组件中使用离子网格，但“col-*”网格属性似乎没有任何效果。我总是在我的行中有两列，然后它会换行。（我设置 col-4，所以我希望有三列）。

这是我的代码，我没有自定义样式。到目前为止，我所有的风格都是主题颜色。我也尝试了旧的 width-10 格式，但无济于事。

我有一个具有以下代码的离子“页面”search.page.html

<ion-content padding color="dark">
   <app-search></app-search>
</ion-content>

然后我使用以下 TS 创建了一个组件：

import { Component } from '@angular/core';
import { MoviesService } from '../../services/movies.service';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss']
})

export class SearchComponent {
  searchResults$;

  constructor(private movieService: MoviesService) {};

  search($event) {
    let searchTerm = $event.target.value;

    this.movieService.searchMovies(searchTerm).subscribe(response => {
      this.searchResults$ = response.json();
    });
  }
}

最后，这里是组件 HTML：

<ion-searchbar color="light" (search)="search($event)" placeholder="Find Movies"></ion-searchbar>

<ion-grid *ngIf="searchResults$">
  <ion-row wrap>
    <ion-col *ngFor="let result of searchResults$.results" col-4>
      <ion-card color="dark" no-margin>
        <img src="http://image.tmdb.org/t/p/w342/{{ result.poster_path }}"/>
        <ion-card-content>
          <ion-card-title>
            {{ result.title }} <span>({{ result.release_date | date: "yyyy" }})</span>
          </ion-card-title>
        </ion-card-content>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>

【问题讨论】：

标签： angular ionic-framework ionic3 ionic4

【解决方案1】：

我认为你错误地实现了组件。

<ion-content padding color="dark"> <div class="app-search-form"></div> </ion-content>

将<div class="app-search-form"></div> 替换为<search></search>

【讨论】：

糟糕！那实际上是我在尝试一些东西，看看它是否有帮助。我将代码更新回（我的想法？）是正常的做法。让我知道它是否仍然看起来不正常！

【解决方案2】：

我找到了解决方案。基本上使用 ionic 4，您不使用 col-4 或 width-25。你使用 size="4"

【讨论】：