angular-引用本地json文件

news2024/10/7 13:24:56

angular-引用json文件,本地模拟数据时使用

  1. 在assets目录下存放json文件
    大佬们的说法是:angular配置限定了资源文件的所在地(就是assets的路径),放在其他文件夹中,angular在编译过程中会忽略,会报找不到文件的错误。

在这里插入图片描述

  1. 在组件中使用httpClient模块来读取json数据。
1. 导入HttpClientModule
2. 组件类中注入httpClient服务并发送 http get请求获取json数据。它会返回一个Observable

// 在组件中获取json
constructor(
    private httpClient: HttpClient
  ) { }

  ngOnInit() {
    let url = "assets/mock-data/input-tree-data.json";
    let inputTree = this.httpClient.get(url);
    inputTree.subscribe(x => console.log("测试一下", x));
  }

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1462539.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

jpg图片太大怎么压缩?3种压缩方法,一学就会

jpg图片太大怎么压缩?在日常生活和工作中,JPG图片过大不仅会导致存储空间的迅速消耗,还影响网络传输的速度,甚至在某些情况下,过大的图片文件还可能造成应用程序运行缓慢或崩溃,严重影响工作效率。因此&…

【Maven】介绍、下载及安装、集成IDEA

目录 一、什么是Maven Maven的作用 Maven模型 Maven仓库 二、下载及安装 三、IDEA集成Maven 1、POM配置详解 2、配置Maven环境 局部配置 全局设置 四、创建Maven项目 五、Maven坐标详解 六、导入Maven项目 方式1:使用Maven面板,快速导入项目 …

一周学会Django5 Python Web开发-Django5路由命名与反向解析reverse与resolve

锋哥原创的Python Web开发 Django5视频教程: 2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~共计25条视频,包括:2024版 Django5 Python we…

【PyTorch][chapter 17][李宏毅深度学习]【无监督学习][ Auto-encoder]

前言: 本篇重点介绍AE(Auto-Encoder) 自编码器。这是深度学习的一个核心模型. 自编码网络是一种基于无监督学习方法的生成类模型,自编码最大特征输出等于输入 Yann LeCun&Bengio, Hinton 对无监督学习的看法. 目录: AE 模型原…

【C++】字符类型和字符数组-string

STL-容器 - string 字符串必须具备结尾字符\0 #include<iostream> #include<string> using namespace std; //STL-容器 - string char ch[101];//字符串必须具备结尾字符\0 int main() {int n; cin >> n;for (int i 0; i < n; i) {cin >> ch[i];}…

js如何抛异常,抛自定义的异常

js如何抛异常,抛自定义的异常 最简单的自定义异常 throw "hello" 来自chrome123的控制台的测试 throw "hello" VM209:1 Uncaught hello &#xff08;匿名&#xff09; VM209:1 try{ throw "hello";}catch(e){console.log(e);} VM338:1 hello…

每日coding 337打家劫舍III

337. 打家劫舍 III 小偷又发现了一个新的可行窃的地区。这个地区只有一个入口&#xff0c;我们称之为 root 。 除了 root 之外&#xff0c;每栋房子有且只有一个“父“房子与之相连。一番侦察之后&#xff0c;聪明的小偷意识到“这个地方的所有房屋的排列类似于一棵二叉树”。…

08 按键消抖

在按键控制 LED中采用直接读取按键电平状态&#xff0c;然后根据电平状态控制LED。虽然直接读取按键电平状态然后执行相应处理程序的方法非常简单&#xff0c;但是这种方式可能存在误判问题&#xff0c;进而有可能导致程序功能异常&#xff0c;这是因为按键按下和松开时存在抖动…

WordPress后台自定义登录和管理页面插件Admin Customizer

WordPress默认的后台登录页面和管理员&#xff0c;很多站长都想去掉或修改一些自己不喜欢的功能&#xff0c;比如登录页和管理页的主题样式、后台左侧菜单栏的某些菜单、仪表盘的一些功能、后台页眉页脚某些小细节等等。这里boke112百科推荐这款可以让我们轻松自定义后台登录页…

定制学习风格、满足多元需求:Mr. Ranedeer 帮你打造 AI 家教 | 开源日报 No.178

JushBJJ/Mr.-Ranedeer-AI-Tutor Stars: 20.4k License: NOASSERTION Mr. Ranedeer 是一个个性化的 AI 辅导项目&#xff0c;主要功能包括使用 GPT-4 生成定制化提示&#xff0c;为用户提供个性化学习体验。其核心优势和特点包括&#xff1a; 调整知识深度以满足学习需求定制学…

Nginx 和 Apache 的比较

Nginx和Apache的对比 Nginx和Apache的优缺点比较 (1)nginx相对于apache的优点 ①轻量级&#xff0c;同样起web服务&#xff0c;比apache占用更少的内存及资源 ②抗并发&#xff0c;nginx处理请求是异步非阻塞的&#xff0c;而apache是阻塞型的在高并发下&#xff0c;nginx能保持…

9.vue学习笔记(组件传递Props校验+组件事件-组件传递数据+组件事件-配合“v-model”使用)

文章目录 1.组件传递Props校验1.1.默认值1.2.必选项1.3.注意事项&#xff1a;props 是只读的 2.组件事件-组件传递数据2.1.温馨提示&#xff1a;组件之间传递数据的方案 3.组件事件-配合“v-model”使用 1.组件传递Props校验 Vue组件可以更细致地声明对传入的 props 的校验要求…

基于JAVA+SpringBoot+Vue的前后端分离的电子商城

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 在当今数字化时代&…

人工智能与机器学习行业新闻:颠覆企业运营方式的 AI 趋势

AI 推动业务转型 人工智能 (AI) 和机器学习已经在重塑各行各业的业务模式。AI 通过处理和整合数据支持战略决策的制定&#xff0c;其规模和速度远远超过了人脑。无疑&#xff0c;未来我们还将在 AI 领域取得许多重大突破&#xff0c;而拥有大量数据的行业可能会从人工智能革命…

C++ Primer 笔记(总结,摘要,概括)——第3章 字符串、向量和数组

目录 3.1 命名空间的using声明 3.2 标准库类型string 3.2.1 定义和初始化string对象 3.2.2 string对象上的操作 3.2.3 处理string对象中的字符 3.3 标准库类型vector 3.3.1 定义和初始化vector对象 3.3.2 向vector对象中添加元素 3.3.3 其他vector操作 3.4 迭代器介绍 3.4.…

”戏说“ 交换机 与 路由器

一般意义上说 老哥 这文章发表 的 东一榔头 西一锤 呵呵&#xff0c; 想到哪里就啰嗦到哪里 。 交换机&#xff1a; 其实就是在通道交换 路由器&#xff1a; 不光是在通道交换还要在协议上交换 下图你看懂了吗&#xff1f; &#xff08;仅仅数据交换-交换机 协议…

安卓开发:挑战每天发布一个封装类02--Wav录音封装类AudioChannel 1.0

简介 库名称&#xff1a;AudioChannel 版本:1.0 由于项目需求录音并base64编码存到服务器中&#xff0c;就顺手改装了一个别人的封装类 原封装类地址:Android AudioRecord音频录制wav文件输出 - 简书 (jianshu.com) 描述&#xff1a;此封装类基于AudioRecord实现wav的音频…

10.CSS3的calc函数

CSS3 的 calc 函数 经典真题 CSS 的计算属性知道吗&#xff1f; CSS3 中的 calc 函数 calc 是英文单词 calculate&#xff08;计算&#xff09;的缩写&#xff0c;是 CSS3 的一个新增的功能。 MDN 的解释为可以用在任何长度、数值、时间、角度、频率等处&#xff0c;语法如…

详细描述一下CrossOver2024版本的用途和作用?

当然可以。CrossOver 是一款由 CODE WEAVERS 公司开发的软件&#xff0c;其主要目标是在 macOS 和 Linux 系统上实现与 Windows 应用程序的兼容性。它不同于传统的虚拟机&#xff0c;如 Parallels 或 VMware&#xff0c;因为它并不在 macOS 上创建一个完整的 Windows 环境。相反…

【进程概念】

目录 什么是在计算机运行的程序这么多运行的程序计算机是如何管理的先描述再组织 什么是在计算机运行的程序 对于一个在磁盘可执行的二进制文件&#xff0c;也可叫做可执行程序。对于一个可执行的程序&#xff0c;程序有自己的代码和数据。一旦运行起来&#xff0c;就会在计算…