如何绑定 Angular 2 表达式和 TypeScript 方法?

2024-06-24

我想做的是在输入名字和姓氏时显示全名。

这有效:

<h1 [hidden]="!firstName || !lastName">Hello {{lastName + ', ' + firstName}}!</h1>

这不起作用(调用类中定义的方法的正确方法是什么?):

<!--h1 [hidden]="!firstName || !lastName">Hello {{fullName()}}!</h1!-->

这也不起作用:

<button ng-click="alertFullName()">show full name</button>

以下是文件: 索引.html:

<!DOCTYPE html>
<html>

  <head>
    <title>Angular 2 QuickStart</title>

    <!-- 1. Load libraries -->
    <script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'src': {defaultExtension: 'ts'}} 
      });
    </script>

    <!-- 3. Bootstrap -->
    <script>
      System.import('angular2/platform/browser').then(function(ng){
        System.import('src/hello_world').then(function(src) {
          ng.bootstrap(src.HelloWorld);
        });
      });
    </script>

  </head>

  <!-- 4. Display the application -->
  <body>
    <hello-world>Loading...</hello-world>
  </body>

</html>

src/hello_world.html:

<label>Name:</label>
<input type="text" [(ngModel)]="firstName" placeholder="Enter first name here">
<input type="text" [(ngModel)]="lastName" placeholder="Enter last name here">
<hr>
<h1 [hidden]="!firstName || !lastName">Hello {{lastName + ', ' + firstName}}!</h1>
<!--h1 [hidden]="!firstName || !lastName">Hello {{fullName()}}!</h1!-->
<button ng-click="alertFullName()">show full name</button>

src/hello_world.ts:

import {Component} from 'angular2/core';

@Component({
  // Declare the tag name in index.html to where the component attaches
  selector: 'hello-world',

  // Location of the template for this component
  templateUrl: 'src/hello_world.html'
})
export class HelloWorld {
  firstName: string = '';
  lastName: string = '';
  function fullName(): string {
    return firstName + ', ' + lastName;
  }
  function alertFullName() {
    alert(firstName + ', ' + lastName);
  }
}

除了 @Günter Zöchbauer 所写的内容(即使用(click), not ng-click),这段代码

function fullName(): string {
   return firstName + ', ' + lastName;
}
function alertFullName() {
  alert(firstName + ', ' + lastName);
}

应该

fullName():string {
    return this.firstName + ', ' + this.lastName;
}
alertFullName() {
   alert(this.firstName + ', ' + this.lastName);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何绑定 Angular 2 表达式和 TypeScript 方法? 的相关文章

随机推荐

  • 如何在每种情况下仅使用 CSS 将首字母大写

    我只想将第一个字母大写并且其他应该小使用CSS 字符串是 SOMETHING BETTER sOMETHING bETTER Something better 但结果应该是 Something Better 使用 CSS 可以实现这一点吗
  • 在 Docker 容器中运行 MySQL

    所以我的最终目标是运行一个 MySQL Docker 容器 比如来自公共注册表的 tutum mysql 然后将一个 Gitlab Docker 容器 比如 Sameersbn gitlab 链接到它 其中两个容器都使用持久存储 然而 我被
  • 在 facebook 的 share.php 上传递标题、url 和图像

    我想在 facebook 上分享标题 图像和描述 无需 javascript 只需将这些传递到 facebook 的 share php 即可 我在这个网站上得到了一些有问题的代码用于社交书签的 AddThis AddToAny Share
  • Python 列表理解和“不在”

    我正在开始使用 Python 目前正在学习列表理解 所以这听起来可能很奇怪 问题 是否可以使用列表理解来创建元素列表t中没有找到s 我尝试了以下操作 但它给了我一个错误 gt gt gt t 1 2 3 4 5 gt gt gt s 1 3
  • Intellij IDEA 与 ideavim。无法从其他来源复制文本

    我尝试使用默认的 vim 键绑定 使用 ideavim 插件从 IDEA 复制文本 y 但这段文本没有复制到全局缓冲区中 我只能将其粘贴到 IDEA 中 例如 如何在浏览器中使用复制的文本 Vim s yank http vimdoc so
  • 使用 mvc3 将图像保存到文件系统

    我有一些简单的实体 现在需要有一个个人资料图像 执行此操作的正确方法是什么 因此 这是一对一的关系 一张图像仅与一个实体相关 反之亦然 该图像应通过网络表单上传并插入相关实体 因此 当我指出使用文件系统来存储图像并仅将路径图像持久保存到数据
  • Javascript:类型错误:值未实现 FormData 接口

    我正在尝试使用 FormData 通过 AJAX 将数据发送到 PHP 脚本 输入类型文本值似乎没有任何问题 但当我尝试附加文件时 出现错误 TypeError Value does not Implement Interface Form
  • Flask 没有获取复选框值

    当我点击提交按钮时 我试图打印 Flask 中的复选框值 app py 片段 app route test2 methods GET POST def test2 if request method POST if request form
  • 单击选定的 UIButton 时不显示 UIButton 突出显示状态

    我希望当我单击已选择的按钮时 我的 UIButton 显示突出显示状态 基本上在突出显示的状态下 我应用 png 图像作为 UIButton 背景图像以提供按下效果 但是 如果按钮已经处于选定状态 当我再次单击它时 我只是看不到突出显示的状
  • 使用带反射的 XPath 样式查询

    我有一个类树 其中包含层次结构中的多个对象 因此 我可能有一个 Container 对象 它托管 3 个 SubContainer 对象 而这些对象又托管任意数量的 Item 对象 有什么方法可以在此对象树上使用 XPath 样式表达式 这
  • 通过股票报价识别 pandas 数据框中的价格波动/趋势

    我有一个带有 DatetimeIndex 和 ohlcv 股票报价列的 pandas Dataframe 我想提取满足特定阈值的价格波动 趋势 大于 0 3 美元的上涨波动 趋势 变动以及超过 0 3 美元的下跌波动 趋势 变动 df 10
  • 用于 Jenkins/本地构建的 PyPI 本地缓存

    我有一个 Jenkins 实例 它与其伴随者一起构建我的项目PyPI http pypi python org pypi包裹来自要求 txt http www pip installer org en latest requirements
  • 如何使用 Google Fit API 获取各种健身活动的读数?

    Google Fit API 中有各种健身活动 例如有氧运动 羽毛球 拳击 举重等 如何使用 Google Fit API 获取每项活动的步数读数和消耗的卡路里 任何形式的建议都是非常受欢迎的 提前致谢 我不确定这个结果是否是您需要的 您可
  • 如何部署连接Django RESTful API的静态网站?

    首先 谷歌或SO搜索对我没有帮助 很多关于django静态文件的提示 我认为这些提示与这里无关 我继承了一个项目 其中包括 Django 后端以 API 形式仅返回 JSON 响应 标准 Swampdragon 部署将实时更新推送到前端 这
  • 为使用 Carrierwave 上传图像文件的用户提供适当的 s3 权限

    在 Michael Hartl 撰写的 Rails 教程 第 11 章末尾 我通过创建存储桶 使用 IAM 设置用户并授予用户 AmazonS3FullAccess 策略 成功地实现了用户上传到 Amazon S3 服务的功能 允许我网站上
  • 如何使用openpyxl获取位置(行,列)单元格的值?

    我正在使用 openpyxl 获取由行号和列号定义的特定位置处的单元格的值 文档中的代码不起作用 文档链接 http openpyxl readthedocs io en default tutorial html accessing on
  • Laravel Blade 检查用户角色

    在 laravel Blade 模板中 我们可以使用以下代码排除 HTML 的某些部分 if Auth user li a href Mein Profil a li li a href Admin a li else li a href
  • Haskell 中是否可以部分应用第 n 个参数?

    我很好奇是否可以写一个函数apply nth它接受一个函数 参数的数量以及该参数的值 然后返回一个新的 部分应用的函数 我的感觉是 由于类型系统的原因 这是不可能的 但我无法给出令人满意的答案 我也无法提出工作类型签名 如果语言的类型更加松
  • 执行 st_union() 操作后如何将多多边形几何体分成多个多边形对象?

    我有一组多边形 其中一些多边形相交和 或接触 公共边界 我正在使用Rsf包对多边形执行操作 到目前为止我的方法是使用sf st union 它按照我想要的方式连接相邻和相交的多边形 但它也将所有多边形组合成一个MULTIPOLYGON几何学
  • 如何绑定 Angular 2 表达式和 TypeScript 方法?

    我想做的是在输入名字和姓氏时显示全名 这有效 h1 Hello lastName firstName h1 这不起作用 调用类中定义的方法的正确方法是什么 这也不起作用