本文介绍如何使用 npm 包 angular5-odoo-jsonrpc 连接 Odoo 后端，并操作模型数据。以下是我们将要学习的内容：
- 安装和配置 npm 包 angular5-odoo-jsonrpc
- 在 Angular 应用中创建服务并连接 Odoo
- 使用方法调用 RPC API 并处理响应数据
- 示例代码
安装和配置 angular5-odoo-jsonrpc
在开始之前，我们需要安装 angular5-odoo-jsonrpc。
npm install angular5-odoo-jsonrpc
然后，在 app.module.ts 中引入 HttpClient 模块和 angular5-odoo-jsonrpc 模块，并添加提供商。
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ---------------- - ---- -----------------------
------ - ------------------ ---------- - ---- ------------------------
-----------
------------- -
-- ---
--
-------- -
--------------
-----------------
---------------------------
--
---------- -
- -------- ----------- --------- - ------------ ------------------------ -------- --------------- -------------- ------------ -------------- --------------- - -
--
---------- --------------
--
------ ----- --------- - -其中，odoo_server, odoo_db, odoo_username 和 odoo_password 是需要替换为可用的 Odoo 服务器配置、数据库名称、用户名和密码。您也可以将 Odoo 配置存储在 .env 文件中，并在实际部署时使用。
连接 Odoo 并操作模型数据
在 Angular 中，我们可以为 Odoo 创建一个服务。在服务中，我们需要为访问 Odoo 的方法设置一个链接并设置配置信息。以下是我们的 Odoo 服务。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ------------------ - ---- ------------------------
-------------
----------- ------
--
------ ----- ----------- -
------------------- ----- ----------- ------- ------------ ------------------- -
-----------------------
-----
------- ----------------------------
--- ---------------
------ ------------
--------- ---------------
---
-
------------- ------- ------- ----- - --- ------- -------- - ---- -------------- -
------ ------------------------------ ------- --------
-
----------- ------- ---- --------- ------- -------- - ---- -------------- -
------ ---------------------------- ---- --------
-
------------- ------- ----- ----- --------------- -
------ ------------------------------ ------
-
------------- ------- ---- --------- ----- ----- ---------------- -
------ ------------------------------ ---- ------
-
------------- ------- ---- ---------- ---------------- -
------ ------------------------------ -----
-
-在此服务中，我们已经定义了一些基本方法，以执行 CRUD 操作。
- search：在 Odoo 模型中查找数据
- read：读取 Odoo 模型中的数据
- create：向 Odoo 模型中创建数据
- update：更新 Odoo 模型中的数据
- delete：从 Odoo 模型中删除数据
要在 Angular 组件中使用此服务，我们需要添加以下引用。
import { Component, OnInit } from '@angular/core';
import { OdooService } from 'src/app/odoo.service';使用方法调用 RPC API 并处理响应数据
为了在 Angular 组件中使用方法，我们需要在组件中首先引入上述的 Odoo 服务。
import { Component, OnInit } from '@angular/core';
import { OdooService } from 'src/app/odoo.service';现在，我们可以在组件中使用所有上述的 Odoo 服务方法。以下是一个示例。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------- - ---- -----------------------
------------
--------- -------------------
------------ --------------------------------
---------- --------------------------------
--
------ ----- ----------- ---------- ------ -
----- ------
------------------- ------------ ------------ - -
---------- -
-- ------ ----
----------------------------------- --- ------ ---------------------- -- -
--------- - -------
---
-
------------ -
-- ------ ----
-- ------------- --- ---- -- ---------- -
----------------------------------- ------------------- -- -
--------------------
---
-
-
-在上述示例中，我们执行了以下操作：
- 利用
search方法检索数据 - 创建一个用于显示数据的变量
data - 将检索到的数据分配给变量
data - 在执行操作之前使用
confirm函数显示提示框 - 利用
delete方法删除选定的数据
示例代码
结合上述示例和说明，以下是完整的样例代码。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------- - ---- -----------------------
------------
--------- -------------------
------------ --------------------------------
---------- --------------------------------
--
------ ----- ----------- ---------- ------ -
----- ------
------------------- ------------ ------------ - -
---------- -
-- ------ ----
----------------------------------- --- ------ ---------------------- -- -
--------- - -------
---
-
------------ -
-- ------ ----
-- ------------- --- ---- -- ---------- -
----------------------------------- ------------------- -- -
--------------------
---
-
-
-<h1>My Data</h1>
<ul>
<li *ngFor="let d of data">
{{d.name}}
<button (click)="onDelete(d.id)">Delete</button>
</li>
</ul>上述代码将从 my.model 模型检索数据，并列出所有数据。用户可以单击 delete 按钮删除所选数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572c481e8991b448e8e1a