我有一个离子模态控制器,点击一个按钮就会显示出来。对我来说,如果模态组件中的离子项包含对象数组中的详细信息,模态就不会滚动。我无法看到列表中最初没有显示在屏幕上的其余部分。
模态控制器
console.log('Called');
this.modalController
.create({
component: CagesComponent,
breakpoints: [0.75],
initialBreakpoint: 0.75,
showBackdrop: true,
backdropDismiss: true,
})
.then((modalEl) => {
modalEl.present();
return modalEl.onDidDismiss();
})
.then((resultData) => {
console.log(resultData.data, resultData.role);
if (resultData.role === 'confirm') {
this.form.get('cageNo').setValue(resultData.data);
}
});
}
笼架.组件.html
<ion-list>
<ion-item button (click)="onCageSelect(cage)" *ngFor="let cage of cages">
<ion-thumbnail slot="start" >
<img [src]="cage.cageImg">
</ion-thumbnail>
<div class="item-desc">
<h4>{{cage.name}}({{cage.type}})</h4>
<h6>{{cage.description}}</h6>
</div>
</ion-item>
</ion-list>
</div>
保持架.组件.ts
import { IonicModule, ModalController } from '@ionic/angular';
import { Cage } from 'src/app/cage/cage.model';
import { CageService } from 'src/app/cage/cage.service';
@Component({
selector: 'app-cages',
templateUrl: './cages.component.html',
styleUrls: ['./cages.component.scss'],
})
export class CagesComponent implements OnInit {
cages: Cage[] = [];
constructor(
public cageSrvc: CageService,
public modalCtrl: ModalController
) {}
ngOnInit() {
this.cageSrvc.getCages().subscribe((cages) => {
this.cages = cages;
});
}
onCageSelect(cage: Cage) {
console.log(cage.name);
this.modalCtrl.dismiss(cage.name, 'confirm');
}
}
2条答案
按热度按时间nr7wwzry1#
把你所有的内容物放在离子内容物里面。
mefy6pfw2#
Ion-content没有解决我的问题,它甚至不再显示我的模态。我所做的是将我所有的内容 Package 在一个容器中,并使用以下css:
将高度调整为您选择的任何值。