angular - 如果选中,则在 ion-textarea 中打印复选框的名称。关于离子
问题描述
我试图在 ion-texarea 中打印选中复选框的名称。该应用程序要求输入名称、流派(男性、女性)和描述(高、小、聪明、丑等),底部有一个 ion-textarea 打印一个句子,例如,名称是一个流派和她/他是选中复选框的描述。前任。 约翰是个男人,他又高又聪明又丑。
我拥有的html代码是:
<ion-item>
<ion-label color="primary">Genre</ion-label>
<ion-list>
<ion-item *ngFor="let genre of genre">
<ion-label>{{genre.name}}</ion-label>
<ion-checkbox slot="end" [(ngModel)]="genre.isChecked"></ion-checkbox>
</ion-item>
</ion-list>
</ion-item>
<ion-list-header>
<ion-label color="primary">Descripcion</ion-label>
</ion-list-header>
<div>
<ion-col><ion-button expand="full" (click)="gen(); result()" >Criticar</ion-button></ion-col>
<ion-textarea [ngModel]="critica"></ion-textarea>
</div>
打字稿代码是:
export class HomePage {
nombre:string;
genero:any;
critica:any;
genre: any=[
{name:'Masculino', isChecked: false},
{name:'Femenino', isChecked: false}
];
gen(){
this.genero=this.genre.filter(value => {return value.isChecked});
result(){
this.critica = this.genero;
解决方案
我猜你还没有添加完整的代码。甚至描述值也不适用。无论如何,我对您的代码进行了修改,以便您可以获得所检查内容的值。它可能会帮助您继续。
目前,您的文本区域显示为 [object] 类型的输出。
尝试重构您的代码,如下所述。所以你可以得到检查的值。但请确保在选中复选框后禁用当前部分的其他复选框。复选框。
gen() {
this.genre.forEach(item => {
if(item.isChecked == true){
this.genero = item;
return;
}
})
}
result() {
this.critica = this.genero.name;
}
推荐阅读
- javascript - 多个音频地址对齐项目 HTML
- android - Firebase DataSnapshot getValue 未在初始化主体上设置属性
- oracle - 更新:功能编辑与其他设计
- c++ - 为什么我不能在我的静态函数中访问私有构造函数,如下所示?
- nginx - Kubernetes NGINX Ingress:禁用特定路径的基本身份验证
- javascript - React:当将函数传递给组件的一个实例时,为什么所有其他实例都会受到影响?
- python-3.x - 使用 urlextract 从网站中提取所有 url
- spring-boot - Shiro 中的并发会话控制
- java - 模拟通过 JSON Post 添加用户的控制器
- android - 在 GET 方法中发送 JSON 对象,并在 Android 中使用 Header