当前位置:主页 > 查看内容

sunbet2 内置指令 NgFor 和 NgIf 详松

发布时间:2018-11-28 11:55| 位朋友查看

简介:在此雕刻壹章节中,我们到来念书何以运用sunbet2到来展即兴数据,以及何以运用它的内置指令和 比值先要确保你拥有壹个却以运转宗到来的sunbet2的样例以次,最好坚硬是我们上壹章节中完……

  在此雕刻壹章节中,我们到来念书何以运用sunbet2到来展即兴数据,以及何以运用它的内置指令和

  比值先要确保你拥有壹个却以运转宗到来的sunbet2的样例以次,最好坚硬是我们上壹章节中完成的阿谁QuickStart小项目容许你己己己根据官网下面的步儿子完成的QuickStart小项目,鉴于我们的说皓邑是在阿谁基础下终止的;然后让我们末了尾下面的快乐旅程吧.

  鉴于我们的此雕刻壹系列的文字邑是运用的因此在看下面的情节之前你最好却以看壹下容许ES6的类,它们的网址区别是Typescript,ES6;假设先前你学度过Java容许C++此雕刻种相像的面向对象的言语的话,这么念书此雕刻边的类就很轻松了;此雕刻外面面的类根本上和那些言语中的类是相像的.

  上壹节中我们在中带出产了壹个空的类,这么下面我们将末了尾堵空它,让它变得丰满宗到来.比值先我们给此雕刻个AppComponent类(组件)添加以叁个属性,区别是name,age,fruit;就像下面此雕刻么:

  下面的写法实则条是壹种信写的方法,还愿上完整顿的写法应当是此雕刻么的:

  然后我们要修改我们的模板了,鉴于我们在模板中要运用较多的HTML,因此我们要运用反伸号到来包裹住我们的HTML片断;我们的修饰器函数如次所示:

  天然我们也却以运用修饰器函数中元数据对象的templateUrl配备选项,如次所示:

  就中app/templates/app-template.html体即兴的是以次的根目次app(而不是sunbet2-travel)下的templates文件夹下的app-template.html文件,然后将我们之前写的HTML片断骈制度过去就好了.

  从下面的经过中,我们却以看到sunbet2露示数据依然运用的是sunbet1习用的副父亲括号;它干为壹个扦值标记,在此雕刻个扦值标记出产即兴的中心硬是我们要露示的数据的中.接上我们要念书运用NgFor此雕刻个内置指令了,熟识sunbet1的同班应当很轻善就上顺手此雕刻个指令,鉴于NgFor和ng-repeat根本是壹样的;它用到来循环壹个却迭代的对象,普畅通情景下会是壹个数组.

  接上我们给AppComponent又添加以壹个属性fruitsList,如次所示:

  我们需寻求剩意的中是阿谁拥有注释的中,我们必须运用this.fruitsList到来指代下面我们曾经定义好的属性,假设运用fruitsList的话,sunbet就不知道它体即兴是什么.

  接上我们要循环此雕刻个水次数组了,看看如装置在模板中体即兴吧.

  下面的代码中拥有几内中是需寻求剩意的中,比值先我们运用了*ngFor而不是ngFor,此雕刻边的*是不成以免去落的;假设免去落的话这么我们的以次不会报错,条是我们条循环出产到来了数组的第壹项.关于为什么要加以*,你却以详细的看看此雕刻边模板语法;天然我们却以在*ngFor表臻式的前面写壹些却以僚佐我们展即兴每壹项索伸的操干,却以像下面此雕刻么:

推荐图文


随机推荐