如何在 AngularJS 的字符串插值中使用 javascript函数？

字符串插值基本上用于在 HTML 模板上显示动态数据。它有助于您对component.ts文件进行更改并自动从那里获取数据到 HTML 模板（component.html 文件）。

所以在这里我们创建一个使用字符串插值的简单 HTML 模板，然后我们编写在字符串插值内部使用的函数。

方法 ：

• 创建要使用的 Angular 应用程序。
• 创建一个组件“DemoComponent”。在 demo.component.ts 中创建一些我们在字符串插值中使用的方法。
• 在这里，我们还在字符串插值中使用了内置的 JavaScript函数。

句法 ：

Book Price : {{ 'SHOULD BE LOWER CASE'.toLowerCase() }}

示例 1：（内置函数）在 angular 模板中添加以下 HTML 并使用“ng serve”运行，它将字符串变为小写。

example.component.html

Book Price : {{ 'SHOULD BE LOWER CASE'.toLowerCase() }}

输出 ：

示例 2：（自定义函数）

demo.component.ts

import { Component } from '@angular/core';
  
@Component({
    templateUrl: './demo.component.html',
    styleUrls: ['./demo.component.css']
})
export class DemoComponent{
  
    public Books = [
        {name:"The Pilgrim’s Progress",author:'John Bunyan',price:"13"},
        {name:"Robinson Crusoe",author:'Daniel Defoe',price:"43"},
        {name:"Gulliver’s Travels",author:'Jonathan Swift',price:"33"}
    ]
  
    constructor(){}
  
    printBookName(book){
        return "[ " + book.name + " ]";
    }
    printBookAuthor(book){
        return "[ " + book.author + " ]";
    }
    printBookPrice(book){
        return "[ " + " $" + book.price + " ]";
    }
}

在上面的代码中，我们创建了一个存储书籍对象的书籍数组，然后我们创建了三个函数，我们将在字符串插值中使用这三个函数来打印特定的书籍详细信息。

demo.component.html

  

  
Book Name : {{ printBookName(book) }}
  
Book Author : {{ printBookAuthor(book) }}
  
Book Price : {{ printBookPrice(book) }}

输出：

在 HTML 模板中，我们使用字符串插值中的函数来打印特定的书籍数据。