Angular 从 NgModel 获取值

Question

I want to send multiple values from a to an API function.

on the DB I store the values in text format. The value that is stored is array

on the Swal alert, I am getting [object object] but I want to get each value eg Painting or Graphic Design.

Here is my code so far.

HTML

<ion-item>
  <ion-label>Painting</ion-label>
  <ion-toggle color="gold" [(ngModel)]="creative.Painting" (click)="creativeInterest(creative)"></ion-toggle>
</ion-item>

<ion-item>
  <ion-label>Graphic Design</ion-label>
  <ion-toggle color="tertiary" [(ngModel)]="creative.Graphic Design" (click)="creativeInterest(creative)"></ion-toggle>
</ion-item>

.ts

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

  ngOnInit() {
  }

  creativeInterest(creative:string)
  {
    this.userData.creativeSettings(this.userDetails.uid, creative).pipe(
      map((data: any) => {
        if (data.success) {
          Swal.fire({
            icon: 'success',
            title: creative,
            showConfirmButton: false,
            backdrop: false,
            timer: 2500
          })
        }
      })
    ).subscribe()
  }

user-data.ts

creativeSettings(uid: number, creative:any) {
        const url = this.appData.getApiUrl() + 'creativeSettings';
        const data = this.jsonToURLEncoded({
            uid: uid,
            creative: creative
        });
        return this.http.post(url, data, { headers: this.options });
    }

PHP

function creativeSettings()
{
    
    $request = \Slim\Slim::getInstance()->request();
    $response['success'] = true; // 1 true if not errors OK NOTHING

    $uid = $request->post('uid');
    $creative_interests =  $request->post('creative');

    $db = getDB();
    $sql = "UPDATE users SET creative_interests = :creative_interests WHERE uid = :uid";
    $stmt = $db->prepare($sql);
    $stmt->bindParam("uid", $uid);
    $stmt->bindParam("creative_interests", $creative_interests);
    $stmt->execute();
    $db = null;

    echo json_encode($response);

}

Answer 1

First of all, when naming object properties in JS, the usual naming convention is camelCase. For example:

creative.Painting should become creative.painting

creative.Graphic Design should become creative.graphicDesign

Secondly, you are passing the whole creative object to Swal and it expects a string, that is why you get [object Object] . It can't automatically assume which property to display, you need to explicitly state that. One solution would be to pass the title you would like to display as an argument of the creativeInterest(creative:string) method, ie:

  creativeInterest(creative:string, messageTitle: string)
  {
    this.userData.creativeSettings(this.userDetails.uid, creative).pipe(
      map((data: any) => {
        if (data.success) {
          Swal.fire({
            icon: 'success',
            title: messageTitle,
            showConfirmButton: false,
            backdrop: false,
            timer: 2500
          })
        }
      })
    ).subscribe()
  }

and in you component markup (unchanged parts omitted from the snippet below):

<ion-toggle color="gold" [(ngModel)]="creative.painting" (click)="creativeInterest(creative, 'Painting')"></ion-toggle>

 <ion-toggle color="tertiary" [(ngModel)]="creative.graphicDesign" (click)="creativeInterest(creative, 'Graphic Design')"></ion-toggle>