自定义组件内的离子网格

问题描述 投票:0回答:2

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

这是我的代码,我没有自定义样式。到目前为止我所有的款式都是主题色。我也试过旧的宽度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
2个回答
1
投票

我认为你已经错误地实现了这个组件。

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

<div class="app-search-form"></div>取代<search></search>


0
投票

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

热门问题
推荐问题
最新问题