【Angular2】插值表达式如何嵌套显示

最新推荐文章于 2025-06-10 20:20:54 发布

原创

最新推荐文章于 2025-06-10 20:20:54 发布 · 3k 阅读

收录于

本文介绍了在Angular2项目中遇到的级联下拉框组件问题，每个下拉列表的数据源字段名不同，需要动态显示。文章讨论了如何避免使用 {{}} 插值表达式的嵌套，并分享了在Stack Overflow上找到的解决方案，即利用 `[ ]` 绑定解决Angular不支持插值表达式嵌套的问题。同时强调了准确表述问题和使用关键词进行搜索的重要性。

问题描述

Angular项目中添加了一个级联下拉框组件，如下图所示：

这里写图片描述

组件使用ngFor指令遍历Select 同样还有每个Select中的Option。

<option *ngFor="let item of datas[i]" value="{
   
   {
   
   item.id}}">{
   
   {
   
   item.name}}

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Bboy-AJ

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
16
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue基础指令简述

pspxuan的博客

01-08

381

v-bind绑定属性（单向绑定：数据 --> 视图） 1.概述 v-bind可以绑定html中的属性，使得可以在Vue实例对象中操作该属性属性值是一个表达式，尽管它有引号，所以说我们可以自己定义合法的表达式 注意：v-bind 可以使用：简写 <p :title = "msg + '字符串'"></p> //msg 实际的值为 Vue 定义的数据 2.添加 c...

16 条评论您还未登录，请先登录后发表或查看评论

Vue-插值表达式渲染多层对象数据

zoukunyang的博客

09-06

1289

后端返回的数据格式嵌套多层对象的时候： obj1: { obj2: { id: 520, name: '江疏影'， sex: '女' } } 使用插值表达式渲染数据： <ul> <li> {{ obj1.obj2.name }} </li> </ul> 此时，obj1.obj2.name 为undefined，页面会报错找不到 name。这是因为页面加载的时候数据还没有渲染出来。解决办法：在父盒子加 v-if 判断。 <ul v-

Vue中插值表达式,v-text和v-html三者区别

wriliant的博客

02-03

6222

概述我们在学习vue的过程中，对指令的学习是必不可少的，下面结合自己工作和学习的一点经验介绍下vue中插值表达式，v-text和v-html三者的区别插值表达式 我们知道页面的加载时自上而下的，js加载是同步的。当页面刷新比较频繁或者网上较慢的时候，我们使用插值表达式页面会先出现‘{{message}}’，再用真实数据替换‘{{message}}’(模拟这种现象可以将vue.js的引入放在bo...

插值表达式

weixin_33943836的博客

11-17

2098

1.el :绑定哪个dom。 el语法固定 2.data: 显示数据。 data语法固定；data下面的msg可以随便定义 3.html 显示：{{msg}} 2个大括号 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-wid...

03.Vue.js : 插值表达式的使用

人间清醒

03-17

1209

<!DOCTYPE html> <html lang="en"> <head> <title>插值表达式的使用</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...

模板语法中的插值语法详解

热门推荐

最初都是小白

04-08

1万+

插值表达式

v-text和插值表达式{{ }}的区别

踏步修行

05-16

2091

v-text会覆盖元素中原本的内容，插值表达式{{ }}只会替换自己的这个占位符，不会把整个元素内容替换。

angular 插值表达式

后台模板

02-03

3580

转载自 http://www.ngui.cc/news/show-102.html 在 Angular 中，我们可以使用 {{}} 插值语法实现数据绑定。绑定普通文本 import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `Hello {{name}}`,

Vue 插值语法和指定语法_day2

人生苦短，何妨一试

12-18

328

"v-bind: " 可简写的为 ": " 提取嵌套的值 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>模板语法</title>  <script type="text/javascript" src="../js/vue.js"></script&g...

vue插值表达式和数据绑定

缚己

01-24

1503

插值表达式 Vue 中的插值表达式类似模板引擎中的写法，通过 {{ value }} 的形式在打括号内填充数据。如下代码所示： <body>  <div class="container">{{msg}}</div> <script src="../lib/vue.js"></script> <script> let v

angular中的表达式

codesWay的博客

06-14

1203

其实angular的表达式和javascript中的表达式有相通的地方和不同的地方：相同的地方就是，和javascript一样angular表达式也可以包含字母、操作符（例如加减布尔非等）、变量；不同的地方就是： 1.angularjs不支持控制流程语句（if else）条件（ifelse），循环。在兼容处理null和undefined时候不会报错； 2.angularjs表达式可以写

如何求出插值表达式

Solitarily的博客

12-19

2065

一、原因在实现拉格朗日插值时遇到一个问题，即：当我们手算时用拉格朗日很容易得到具体表达式，但是当我们用机器实现时，却很难得到，因为机器不能表达出未知数x（虽然可以用TensorFlow的占位符，但杀鸡焉用牛刀），因此我们能很容易的得到具体的近似解，却无法得到表达式。但是，python的scipy库中的lagrange实现了这一功能，如图：所以我不禁思考如何实现这一功能，后来我换了一个思路，将系数

Angular中的模板和表达式简介

天马3798

12-20

1888

Angular应用管理者用户之所见和所为，并通过Componnet 类的实例（组件）和面向用户的模板与用户交互。一、模板中的HTML HTML是Angular模板的语言。几乎所有的HTML语法都是有效的模板语法。但是元素是被禁用的。有些合法的HTML被用在模板中是没有意义的。,,等剩下的所有元素基本上都一样用了。注：Angular中可以通过组件和指令类扩展模板中的HTML元素。二

angualr：属性绑定[]、事件绑定()、插值{}

jeason_chan_zju的博客

10-20

704

文章目录1 背景2方括号[]3圆括号()4花括号{{}} 1 背景刚开始学习angular时，方括号和圆括号一脸懵逼，写了一篇https://blog.csdn.net/jeason_chan_zju/article/details/100089216，现在使用了一段时间后，对一些概念有了更好的理解方式。对angular中的方括号、圆括号、花括再次进行总结。 2方括号[] angular完全重写...