[Angular 2] Interpolation: check object exists

In Angular2, sometime we use @Output to pass data to parent component, then parent may pass the data down to another child component.

When you want to display the property of this object, we may need to check whether the object exists or not, otherwise if it not exists, angular2 will throw error.

Of course you can predefine object in the controller, or do something like:

<h2>{{thisHero && thisHero.name}}</h2>

Check the object first, then display the name.

In angular2 , there is another simple way to do it:

<h2>{{thisHero?.name}}</h2>

THe ? mark tell angular to check whether the object exists, if not, just ingore it

时间: 2024-10-11 17:06:07

[Angular 2] Interpolation: check object exists的相关文章

[Javascript] Keyword &#39;in&#39; to check prop exists on Object

function addTo80(n ) { return 80 + n; } function memoizedAddTo80 (fn) { let cache = {}; return (n) => { /*keyword 'in' to check prop exists*/ if (n in cache) { console.log('from cache') return cache[n] } else { console.log('from calculation') cache[n

Angular model objects with JavaScript classes

Angular model objects with JavaScript classes The missing piece in AngularJS Unlike Backbone and Ember, AngularJS does not provide a standardized way to define model objects. The model part of MVC* in Angular is the scope object, which is not what we

What happened when new an object in JVM ?

原文链接:https://www.javaspring.net/java/what-happened-when-new-an-object-in-jvm I. Introduction As you know, Java is an object-oriented programming language. We usually use a variety of objects while writing code. So when you write User user = new User(

Angular CLI 升级 6.0 之后遇到的问题

Angular CLI 1.7.4 在使用 ng build --prod 会构建失败,而 ng build 是正常的.比较好的解决办法是使用 ng build --prod --extract-license=false 或者 ng build --prod --no-extract-license. 最近将 Angular CLI 升级到 6.X 之后,直接 ng build 会报以下错误,ng serve 也是如此. 95% emitting LicenseWebpackPlugin(no

HashMap与TreeMap源码分析

1. 引言     在红黑树--算法导论(15)中学习了红黑树的原理.本来打算自己来试着实现一下,然而在看了JDK(1.8.0)TreeMap的源码后恍然发现原来它就是利用红黑树实现的(很惭愧学了Java这么久,也写过一些小项目,也使用过TreeMap无数次,但到现在才明白它的实现原理).因此本着"不要重复造轮子"的思想,就用这篇博客来记录分析TreeMap源码的过程,也顺便瞅一瞅HashMap. 2. 继承结构 (1) 继承结构 下面是HashMap与TreeMap的继承结构: pu

#Memcached系列#(6)使用Enyim.Caching访问Memcached的一个C#控制台程序

这篇文章主要是通过Enyim.Caching来完成访问Memcached. 这篇文章标为"原创",其实,是从多个地方整合过来的内容:但觉得"转载"也不合适,也并不是完全照搬别人的东西. 参考网址(不过,感觉它的配置写的乱糟糟的):http://www.cnblogs.com/luyinghuai/archive/2008/08/28/1278200.html (1)首先下载EnyimMemcached(文件名:EnyimMemcached-master.zip).

boost::asio::io_service(之一)

boost::asio::io_service /// Provides core I/O functionality. /** * The io_service class provides the core I/O functionality for users of the * asynchronous I/O objects, including: * io_service类为下面的异步对象提供了核心的I/O操作函数 * * @li boost::asio::ip::tcp::socke

Java集合类库 ArrayList 源码解析

集合类库是Java的一个重大突破,方便了我们对大数据的操作.其中 Arrays 和 Collections 工具类可以帮助我们快速操作集合类库.下面对Java集合类库的源码分析是基于jdk1.7的.今天我们来看看ArrayList的底层实现原理. ArrayList的继承结构图 继承自 AbstractList 抽象类,在上层是 AbstractCollection 抽象类,直接去 AbstractCollection 类去看看. AbstractCollection 类主要实现了 Collec

java.util.ArrayList

/* * Copyright (c) 1997, 2013, Oracle and/or its affiliates. All rights reserved. * ORACLE PROPRIETARY/CONFIDENTIAL. Use is subject to license terms. * * * * * * * * * * * * * * * * * * * * */ package java.util; import java.util.function.Consumer; im