AngularJS可以直接使用数据绑定,我们将花括号用于数据绑定-{{}},此过程称为插值。
app.component.html 文件中的变量称为 {{title}} ,而 title 的值在 app.component.ts 文件,并在 app.component.html 中显示该值。
现在让我们在浏览器中创建一个下拉列表。为此,我们在 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 中设置的变量绑定到 app.component.html 中。如: {{}}。
现在让我们根据条件在浏览器中显示数据。在这里,我们添加了一个变量,并将其值指定为 true 。使用if语句,我们可以hidden/show要显示的内容。
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-template ,如下所示:
<ng-template #condition1>Condition is invalid</ng-template>
完整的代码在下面给出-
链接:https://www.learnfk.comhttps://www.learnfk.com/angular7/angular7-data-binding.html
来源:LearnFk无涯教程网
<!--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 。将相同的内容作为 id 分配给 ng-template 。
现在让我们使用 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 }
现在,我们将变量 isavailable 设置为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>
如果变量为true,则为 condition1 ,否则为 condition2 。现在,将创建两个ID为#condition1 和#condition2 的模板。
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)