Angular7:数据绑定
Angular7:数据绑定
数据绑定可以从AngularJS中直接获得,我们使用花括号进行数据绑定-{{}};这个过程叫做插值。在前面的例子中,我们已经看到了如何将值声明给变量标题,并在浏览器中打印出来。
app.component.ts文件中的变量称为{{title}},title的值在应用程序组件文件中初始化,在app.component.ts显示该值。
现在让我们在浏览器中创建一个月份的下拉列表。为此,我们在app.component.ts中创建了一系列月份,如下所示
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Angular 7'; // declared array of months. months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; }
上面显示的月份数组将显示在浏览器的下拉列表中。
我们已经创建了带有选项的普通select标签。在选项中,我们使用了for循环。for循环用于遍历月份数组,依次用月份中的值创建选项标记。
Angular中的语法如下
*ngFor = “let I of months”
为了获得月份值,我们将在其中显示它。
{{i}}
两个花括号有助于数据绑定。您在app.component.ts文件中声明变量,相同的变量将被用花括号替换。
以下是浏览器中的月份的输出。
在应用程序组件中设置的变量可以用花括号绑定在app.component.ts内部。例如:{{}}。
现在让我们根据条件在浏览器中显示数据。这里,我们添加了一个变量,并将该值赋为true。使用if语句,我们可以隐藏/显示要显示的内容。
例子
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Angular 7'; // declared array of months. months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; isavailable = true; //variable is set to true }
app.component.html
<!--The content below is only a placeholder and can be replaced.--> <div style = "text-align:center"> <h1> Welcome to {{title}}. </h1> </div> <div> Months : <select> <option *ngFor = "let i of months">{{i}}</option> </select> </div> <br/> <div> <span *ngIf = "isavailable">Condition is valid.</span> //over here based on if condition the text condition is valid is displayed. //If the value of isavailable is set to false it will not display the text. </div>
输出
让我们用IF THEN ELSE条件来解释上面的例子。
例子
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Angular 7'; // declared array of months. months = ["January", "Feburary", "March", "April", "May","June", "July", "August", "September", "October", "November", "December"]; isavailable = false; //variable is set to true }
在这种情况下,我们将isavailable变量设为false。要打印else条件,我们必须创建ng模板,如下所示
<ng-template #condition1>Condition is invalid</ng-template>
完整代码如下所示
<!--The content below is only a placeholder and can be replaced.--> <div style = "text-align:center"> <h1> Welcome to {{title}}. </h1> </div> <div> Months : <select> <option *ngFor = "let i of months">{{i}}</option> </select> </div> <br/> <div> <span *ngIf = "isavailable; else condition1">Condition is valid.</span> <ng-template #condition1>Condition is invalid</ng-template> </div>
If与else条件一起使用,并且使用的变量是condition1。它被指定为ng模板的id,当可用变量设置为false时,将显示文本条件无效。
下图显示了浏览器中的显示:
现在让我们使用if then else条件。
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Angular 7'; // declared array of months. months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; isavailable = true; //variable is set to true }
现在,我们将使变量变为true。在html中,条件以以下方式编写
<!--The content below is only a placeholder and can be replaced.--> <div style = "text-align:center"> <h1> Welcome to {{title}}. </h1> </div> <div> Months : <select> <option *ngFor="let i of months">{{i}}</option> </select> </div> <br/> <div> <span *ngIf = "isavailable; then condition1 else condition2"> Condition is valid. </span> <ng-template #condition1>Condition is valid</ng-template> <ng-template #condition2>Condition is invalid</ng-template> </div>
如果变量为真,则为condition1,否则为condition2。现在,创建了两个id为#condition1和#condition2的模板。
浏览器中的显示如下