Angular 从 NgModel 获取价值

Question

我想将多个值从 a 发送到 API 函数。

在数据库中，我以文本格式存储值。存储的值是 array

在 Swal 警报中，我正在获取 [object object] 但我想获取每个值，例如绘画或平面设计。

到目前为止，这是我的代码。

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

用户-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

首先，在JS中命名object属性时，通常的命名约定是驼峰式。例如：

creative.Painting 应该变成 creative.painting

creative.Graphic Design 应该变成 creative.graphicDesign

其次，您将整个 creative object 传递给 Swal，它需要一个字符串，这就是您得到 [object Object] 的原因。它不能自动假定显示哪个属性，您需要明确说明。一种解决方案是将您想要显示的标题作为 creativeInterest(creative:string) 方法的参数传递，即：

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

在你的组件标记中（下面的代码片段中省略了未更改的部分）：

<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>

Angular 从 NgModel 获取价值

Angular get value from NgModel

php

ionic-framework

angular