自定义组件内的离子网格

Question

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

这是我的代码，我没有自定义样式。到目前为止，我所有的样式都是主题颜色。我也试过旧的 width-10 格式没有用。

我有一个离子 "page" 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>

Answer 1

我认为您实施的组件有误。

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

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

Answer 2

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

自定义组件内的离子网格

Ionic Grid Inside Custom Component

ionic-framework

ionic3

angular

ionic4