个人中心
gpt4 book ai didi

javascript - 将值传递给 Angular 2 组件

转载 作者：行者123 更新时间：2023-11-30 08:31:34 26 4
gpt4 key购买 nike

<分区>

我正在尝试将一个简单的字符串传递到一个 Angular 2 组件中。对于我的生活，我找不到问题。我将该值作为硬编码值传递给来自 index.html 的组件

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err);  });
    </script>
  </head>

  <!-- 3. Display the application -->
  <body>


    <accordian [inputField]="'string'">Loading...</accordian>


  </body>
</html>

组件

import { Component, Input } from '@angular/core';

@Component({
  selector: 'accordian',
  templateUrl: 'app/accordian.html',
  styleUrls:  ['app/accordian.css']
})
export class Accordian {
  @Input() inputField;
  expanded = true;
  expandToggle(){
    console.log(this.inputField)
    this.expanded = !this.expanded;
  }
}

模板

<header (click)="expandToggle($event)">
  <h4>Select an Activity!!!</h4>
  <button>{{expanded ? '-' : '+'}}</button>
</header>
<ul *ngIf="expanded">
  <li>
      <h5>{{inputField}}</h5>
      <a href="#">Update Personal Information</a>
  </li>
  <li>
      <h5>User Tools</h5>
      <a href="#">Update Personal Information</a>
  </li>
  <li>
      <h5>User Tools</h5>
      <a href="#">Update Personal Information</a>
  </li>
</ul>

当我点击加号按钮吐出值时，我得到的都是未定义的。任何帮助都会很棒!

26 4 0
文章推荐： javascript - 如何在点击时显示隐藏的div
文章推荐： r - 神经网络包拟合值问题
文章推荐： java - 使用 DataOutputStream 写入偏移量
文章推荐： machine-learning - 在机器学习中，可以采取哪些措施来限制所需训练样本的数量？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com