1

我正在创建一个嵌套在 WordPress 网站中的 Angular 应用程序（版本 8）。我正在尝试向插件发出请求以从数据库中获取一些数据。使用 Angular 的 HTTPClient 我得到一个 400 Bad Request。我认为这与无法（或至少不知道如何）将操作传递给 WP 以使 AJAX 代码正常运行有关。

我可以使用 jQuery 的 $.get() 函数并获得正确的响应，但是我很难将数据从我的服务传递到我的组件。

我对我的 Angular 排骨很生疏，所以我确定我做的不对。任何建议或指示将不胜感激！！！

插件的 AJAX 代码：

   //UTIL Functions
    public function get_categories(){
        global $wpdb;
        $cat_sql = "SELECT * FROM {$wpdb->prefix}" . SELF::CATEGORY_TABLE;
        return $wpdb->get_results($cat_sql);
    }

    public function ajaxGetCategories(){
        $prods = $this->get_categories();
        if($prods !== FALSE){

            //NEED TO ASSIGN THE RETURNED OBJECT TO AN ARRAY AND PASS THAT DOWN

            $prodArray = [];
            for($i = 0; $i < count($prods); $i++){
                $prodArray[$i]['p_index'] = $prods[$i]->p_index;
                $prodArray[$i]['product_name'] = $prods[$i]->product_name;
                $prodArray[$i]['product_sections'] = $prods[$i]->product_sections;
                $prodArray[$i]['product_imgID'] = $prods[$i]->product_imgID;
            }

            wp_send_json_success($prodArray);
        }else {
            wp_send_json_error("Error!"); 
        }
        //return $prods;
        wp_die();
    }
        // front end ajax calls
        add_action( 'wp_ajax_get_products', array($this,'ajaxGetCategories') );
        add_action( 'wp_ajax_nopriv_get_products', array($this,'ajaxGetCategories') );

角服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import * as $ from 'jquery';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  private params: object = {
    'action' : 'get_products'
  }
  private post_url: string = 'https://MYCOOLSITE.COM/wp-admin/admin-ajax.php';

  public products = [];


constructor( ) {  
 }

public  getProducts() { 

 $.post(this.post_url, this.params, function(data){

    if(data.success == true){

      var prod = [];
      for(var i = 0; i < data.data.length; i++){
        prod[i] = [];
        console.log("data 1: " + data.data[i] );

        for(var prop in data.data[i]){
          prod[i][prop] = data.data[i].prop;
        }
      }
      return prod;
    } else {
      // @TODO - ADD ERROR HANDLING
    }

  });
}

角组件：

import { Component,OnInit } from '@angular/core';
import {ProductService} from './product.service';
import { Observable } from 'rxjs/Observable';



@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass'],
  providers: [ProductService]
})
export class AppComponent implements OnInit{

  title = 'Choose a product.';

  constructor(private productService: ProductService){ 
    this.productService.getProducts();
     }


  ngOnInit() {  

  }

}

至于它所在的代码，我可以将所有数据打印到服务中的控制台，但它永远不会到达组件。

我在服务的 $.get() 中注意到它没有返回产品，我也不能将任何值传递给 this.products （由于范围问题）。但我至少认为它会从函数中返回 prod ......（？）

我试图让 prod 成为一个 observable，但那更糟糕。我认为我最好的选择是使用 Angular 的 http.get()，因为它会自动传递一个 observable，但我无法弄清楚如何将 ajax 操作名称传递给插件以使其成功。我所有的谷歌搜索都在使用 WP API，这对我没有任何好处。

4

1 回答 1

1

请试试这个

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import * as $ from 'jquery';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  private params: object = {
    'action' : 'get_products'
  }
  private post_url: string = 'https://MYCOOLSITE.COM/wp-admin/admin-ajax.php';

   products = new BehaviorSubject<any>([]);
  productsList = this.products.asObservable();


constructor(private http: HttpClient ) {  
 }

public  getProducts() { 

 this.http.post<any>(this.post_url, this.params).subscribe(data=> {

    if(data.success == true){

      this.products.next(data.data)
    } else {
      // @TODO - ADD ERROR HANDLING
    }

  });
}

在组件上

import { Component,OnInit } from '@angular/core';
import {ProductService} from './product.service';
import { Observable } from 'rxjs/Observable';



@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass'],
  providers: [ProductService]
})
export class AppComponent implements OnInit{

  title = 'Choose a product.';

  constructor(private productService: ProductService){ 
    this.productService.getProducts();
     }


  ngOnInit() {  
    this.productService.productsList.subscribe(response => {
        console.log(response);
      })
  }

}
于 2019-08-23T02:22:53.400 回答