Question

我正在使用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>

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

我找到了解决方案。基本上对于离子4，您不使用col-4或width-25。您使用size =“ 4”

自定义组件内部的离子网格

2 个答案: