SimonIoa 77 Master Poster

Screenshot_2022-01-26_at_11_35_23_AM.png

Hello i want to retrieve multiples values from single column on db. And i did. They are shown on Console (Painting, Illustration, Graphic Design) but when i put the values on ion-toggles with ngModel only one is set to true. As you may see on the screenshot the values are returning but only Painting is true (toggle on right side)

Html

 <ion-list >
<ion-list-header>
I am Interested in...
</ion-list-header><div><br /></div>
   <ion-item>
  <ion-label>Painting</ion-label>
        <ion-toggle color="gold" [ngModel]="interest=='Painting' ? true:false" (ionChange)="creativeInterest(creative, 'Painting')"></ion-toggle>
</ion-item>

<ion-item>
  <ion-label>Graphic Design</ion-label>
  <ion-toggle color="tertiary" [ngModel]="interest=='Graphic Design' ? true:false" (ionChange)="creativeInterest(creative, 'Graphic Design')"></ion-toggle>
</ion-item>

<ion-item>
  <ion-label>Illustration</ion-label>
  <ion-toggle color="danger" [ngModel]="interest=='Illustration' ? true:false" (ionChange)="creativeInterest(creative, 'Illustration')"></ion-toggle>
</ion-item>

<ion-item>
  <ion-label>Sculpture</ion-label>
  <ion-toggle color="success" [ngModel]="interest=='Sculpture' ? true:false" (ionChange)="creativeInterest(creative, 'Sculpture')"></ion-toggle>
</ion-item>

<ion-item>
  <ion-label>Literature</ion-label>
  <ion-toggle color="danger" [ngModel]="interest=='Literature' ? true:false" (ionChange)="creativeInterest(creative, 'Literature')"></ion-toggle>
</ion-item>

<ion-item>
  <ion-label>Theater</ion-label>
  <ion-toggle color="dark" [ngModel]="interest=='Theater' ? true:false" (ionChange)="creativeInterest(creative, 'Theater')"></ion-toggle>
</ion-item>

<ion-item>
  <ion-label>Film</ion-label>
  <ion-toggle color="warning" [ngModel]="interest=='Film' ? true:false" (ionChange)="creativeInterest(creative, 'Film')"></ion-toggle>
</ion-item>

.ts

export class CreativeSettingsPage implements OnInit {
  creativeInterests: any=[];
 creative: any= {};
 userDetails: any = {};
 interest:any=[];
 constructor(
public userData: UserData
 ) {
this.userDetails = this.userData.getUserData();
 }

ngOnInit() {
this.creativeInsterestSet();
  }

creativeInsterestSet() {
this.userData.creativeInterests(this.userDetails.uid).pipe(
    map((data: any) => {
        if (data.success) {
            this.creativeInterests = data.creativeInterests;
            this.creativeInterests.filter(item =>  {
              this.interest=item.interest;
             console.log( this.interest);
          });

        }
    })
).subscribe()
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.