Question

这是我的搜索page，其中我使用for循环

加载结果

<ion-header>
    <ion-navbar>
        <ion-title>Search</ion-title>
    </ion-navbar>
</ion-header>
<ion-content padding> 
<ion-list>
    <ion-item>
        <ion-input [(ngModel)]="room_name" type="text"></ion-input>
    </ion-item>
    <ion-list> 
        <guide-view *ngFor="let g of guideList" [guide]="g"></guide-view> 
    </ion-list> 
</ion-list>
</ion-content>

我的目标是为[(ngModel)]="room_name"组件提供guideView：

@Component({ 
    selector: 'guide-view', 
    template: ` 
<ion-item> 
    <ion-thumbnail item-left> 
      <img src="{{guide.imagePreviewUrl}}"> 
    </ion-thumbnail> 
    <h2>{{guide.username}} {{message}}</h2> 
    <p>rate: {{guide.rate}}</p>
    <button clear ion-button outline item-right icon-left (click)="engageGuide(guide.username)">
        <ion-icon name="arrow-dropright"></ion-icon>
        Open Room
    </button>
</ion-item>` 
})
export class GuideView { 
    @Input() 
    guide: Guide;
    message : any;

    constructor(public navCtrl: NavController, public myService: MyServiceh) {}    

    engageGuide(guide: Guide): void{ 
        this.myService.openRoom(???room_name???,guide).subscribe((data)=>{
        ....
    } 
}

正如您所看到的，我需要输入文字的值，对于电话openRoom，但我不知道如何接受它。

Answer 1

在搜索页面中的这一行

<guide-view *ngFor="let g of guideList" [guide]="g"></guide-view>

变为

<guide-view *ngFor="let g of guideList" [guide]="g" [room_name]="room_name"></guide-view>

然后我可以使用以下代码接收room_name的组件：

export class GuideView { 
    @Input() 
    guide: Guide;
    message : any;
    @Input('room_name') = myRoom;

    constructor(public navCtrl: NavController, public myService: MyServiceh) {}    

    engageGuide(guide: Guide): void{ 
        this.myService.openRoom(this.myRoom,guide).subscribe((data)=>{
        ....
    } 
}

Ionic2：通过组件获取页面中的输入文本字段

1 个答案: