NgModel 只显示一个值

Question

Hello I am calling a column values from db (interest) and i want to pass them with NgModel to ion-toggles. As you may see on the screenshot 3 values are returning (Painting, Illustration, Graphic Design) but only 1 (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>

component.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()
}

Answer 1

You should use ngModel with just a variable name such as:

<element [ngModel]="variableName"></element>

and then in your component assign a value to this ngModel based on some logic:

assignLogic() {
    if (otherVariable === "Theater") {
        variableName = "Theater";
    }
}

This will update your display!