Ионная сетка внутри нестандартного компонента - PullRequest
Новая
       8

Ионная сетка внутри нестандартного компонента

0 голосов
/ 08 сентября 2018

Я использую 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>

Ответы [ 2 ]

0 голосов
/ 08 сентября 2018

Я нашел решение. В основном с ионным 4, вы не используете col-4 или width-25. Вы используете размер = "4"

0 голосов
/ 08 сентября 2018

Я думаю, что вы неправильно реализовали компонент.

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

заменить <div class="app-search-form"></div> на <search></search>

...