小编Rak*_*hat的帖子

我正在尝试在用户单击添加按钮时动态添加输入字段,并且对于每个表单字段必须有一个删除按钮,当用户单击表单字段必须删除时,我需要使用Angular 2来实现此目的,如我是Angular 2的新手,请帮我完成它

我试过了什么

我创建了一组字段(3个选择框和1个文本框),创建了一个名为添加字段的按钮,但我已经在角度1.x中尝试了它的工作正常但是在角度2我不知道如何完成它,这是我全部工作的 链接

app/app.component.ts
 import {
    Component
  }
from '@angular/core';
  @Component({
    selector: 'my-app',
    template: `
    <h1>{{title}}</h1>
    <div class="container">
    <button class="btn btn-success bt-sm">add</button>
    <form role="form" calss="form-inline">
    <div class="form-group col-xs-3">
    <label>Select State:</label>
    <select class="form-control" [(ngModel)]="rules.State" id="sel1">
            <option>State1</option>
            <option>State2</option>
            <option>State3</option>
            <option>State4</option>
</select>
     </div>
    <div class="form-group col-xs-3">
<label>Rule:</label>
     <input type="text" data-toggle="modal" data-target="#myModal" class="form-                   control">
    </div>
<div class="form-group col-xs-3">
<label>Pass State :</label>
    <select class="form-control" [(ngModel)]="rules.pass">
    <option>State1</option>
    <option>State2</option>
    <option>State3</option>
    <option>State4</option>
</select>
 </div>
 <div class="form-group col-xs-3">
    <label>Fail State:</label>
        <select class="form-control" [(ngModel)]="rules.fail">
        <option>State1</option>
        <option>State2</option>
        <option>State3</option> …

我正在尝试打印使用中的http调用结果Angularrxjs

请考虑以下代码

import { Component, Injectable, OnInit } from '@angular/core';
import { Http, HTTP_PROVIDERS } from '@angular/http';
import 'rxjs/Rx';

@Injectable()
class myHTTPService {
  constructor(private http: Http) {}

  configEndPoint: string = '/my_url/get_config';

  getConfig() {

    return this.http
      .get(this.configEndPoint)
      .map(res => res.json());
  }
}

@Component({
    selector: 'my-app',
    templateUrl: './myTemplate',
    providers: [HTTP_PROVIDERS, myHTTPService],


})
export class AppComponent implements OnInit {

    constructor(private myService: myHTTPService) { }

    ngOnInit() {
      console.log(this.myService.getConfig());
    }
}

每当我试图打印出getconfig它的结果总是返回

Observable {_isScalar: false, source: Observable, operator: MapOperator} …

在发布Angular 2 RC.5之后,引入了路由器解析.这里用Promise演示了例子,如果我用Observable向服务器发出请求怎么做？

search.service.ts

...
searchFields(id: number) {
  return this.http.get(`http://url.to.api/${id}`).map(res => res.json());
}
...

搜索resolve.service.ts

import { Injectable } from '@angular/core';
import { Router, Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';

import { SearchService } from '../shared';

@Injectable()
export class SearchResolveService implements Resolve<any> {

  constructor(
    private searchService: SearchService ,
    private router: Router
  ) {}

  resolve(route: ActivatedRouteSnapshot): Observable<any> | Promise<any> | any {
    let id = +route.params['id'];
    return this.searchService.searchFields(id).subscribe(fields => {
      console.log('fields', fields);
      if (fields) …

我看了很多问题和youtube api的东西但是对于我的生活无法弄清楚为什么onYouTubeIframeAPIReady无法正常工作.

这是我的iframe:

<iframe id="youtube_vid" width="763" height="430" src="https://www.youtube.com/embed/dlJshzOv2cw?theme=light&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>

我的剧本:

function callYTapi() {

    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    console.log('script loaded');

    function onYouTubeIframeAPIReady() {
        console.log('IframeAPI = Ready');
        var player = new YT.Player('youtube_vid', {
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerReady(event) {
        event.target.playVideo();
    }

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PAUSED) {
            console.log("Paused");
        }

        if (event.data == YT.PlayerState.PLAYING) {
            console.log("Playing");
        }

        if (event.data == YT.PlayerState.ENDED) {
            end(); 
        }
    } …

今天，我在3个月后刷新的项目中看到此警告。

不推荐使用未使用的变量。从TypeScript 2.9开始。请改用内置的编译器检查。

但是我tsconfig.json似乎没有使用它。

{
  "compilerOptions": {
    "lib": ["es6"],
    "module": "commonjs",
    "noImplicitReturns": true,
    "outDir": "lib",
    "sourceMap": true,
    "target": "es6",
    "allowJs" : true
  },
  "compileOnSave": true,
  "include": [
    "src"
  ]
}

可能是以前任何配置中都隐含的配置。

您能指出我该怎么做吗？

如果有用

$ node -v
v10.3.0
$ npm -v
6.1.0

这些devDependencies与我的类型脚本有关package.json

"devDependencies": {
    ...
    "tslint": "^5.11.0",
    "typescript": "^2.9.1"
    ...
  },

我想在"Away Team"和"Baseball Field"div之间加一个小的水平空间,如这个小提琴:http://jsfiddle.net/VmejS/.我试过改变填充,边距,包括十进制列偏移,都没有成功.

这是html:

 <body>
    <div class='container'>
      <div class='row'>
        <div class='col-md-12 panel' id='gameplay-title'>Title</div>
      </div>
      <div class='row'>
        <div class='col-md-6 col-md-offset-3 panel' id='gameplay-scoreboard'>Scoreboard</div>
      </div>
      <div class='row'>
        <div class='col-md-3 panel' id='gameplay-away-team'>Away Team</div>
        <div class='col-md-6 panel' id='gameplay-baseball-field'>Baseball Field</div>
        <div class='col-md-3 panel' id='gameplay-home-team'>Home Team</div>
      </div>
      <div class='row'>
        <div class='col-md-6 col-md-offset-3 panel' id='gameplay-at-bat'>At Bat</div>
      </div>
      <div class='row'>
        <div class='col-md-6 col-md-offset-3 panel' id='gameplay-game-report'>Game Report</div>
      </div>
    </div>
  </body>

在Safari中,单击事件未在带有svg元素的按钮上触发.当你单击按钮边缘时单击事件会触发,但如果单击svg元素本身则不会.

$(document).on('click', 'button', function(e) {
    console.log(e);
});

如果我附加这样的点击事件,它可以工作:

$('button').on('click', function(e) {
    console.log(e);
});

由于动态添加了按钮,我不能这样做;

codepen.io中的示例http://codepen.io/neilhem/pen/bdGYPq

jQuery版本 2.1.3

写作时package.json:

"scripts": { "preinstall": "npm install -g grunt-cli" }, "devDependencies": { "async": "^0.9.0", "grunt": "^0.4.5", "grunt-contrib-connect": "^0.9.0", "grunt-contrib-cssmin": "^0.10.0", "grunt-contrib-jshint": "^0.10.0", "grunt-contrib-uglify": "^0.6.0", "grunt-contrib-watch": "^0.6.1", "jit-grunt": "^0.9.0", "marked": "^0.3.2", "time-grunt": "^1.0.0", "underscore": "^1.7.0" }

然后运行命令 npm install

它适用于某些计算机,但有些我得到这个错误:http: //pastebin.com/rYUwhV5k

是正确使用的package.json吗？还有其他办法吗？如何解决其他计算机上出现的问题？

我想要有边界的明星.如何在clippath中显示边界？

<svg x="0" y="0" enable-background="new 0 0 98 94" xml:space="preserve" style="position: absolute;">
  <defs>
    <clipPath id="clipping">
      <polygon points="48 6 65 30 92 37 75 60 75 88 48 80 22 88 22 60 6 37 32 30" style="fill:none;stroke:#fadf0b;stroke-width:6" />
    </clipPath>
  </defs>
</svg>

示例:http://codepen.io/neilhem/pen/VYdeaQ

如何将数据从组件传递到自定义管道？
我试图将表单数据绑定到组件并传递给管道.

<input [(ngModel)]="phone" placeholder="Phone Number">

想要从组件传递'this.phone'到'PhoneNum'管道.

这是在模板中完成的.
{{phoneNumber | PhoneNum}} // PhoneNum is the pipe

我的问题是在AngularJS中以这种方式从控制器完成的

<input ng-model="phone placeholder="Phone Number">
$filter(‘PhoneNum’)($scope.phone); // something like this.
欣赏时间!

我在 iframe 中有一个页面和另一个 html 页面。在这个 iframe 中，我放置了这个标头标签

<META http-equiv="Pragma" content="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<meta http-equiv="cache-control" content="no-cache" />

但 chrome 仍然缓存它，当 iframe 内容更改时，点击 f5 按钮，但 chrome 仍然加载缓存版本，而不是新版本。

请告诉我如何防止 google chrome 缓存此 iframe。

如何发出http请求从远程服务器获取数据，然后将请求的数据作为express js中的视图数据传递？

例如，使用静态数据呈现视图的代码：

var express = require('express');
var router = express.Router();

var news = [{id: 1, title: 'News title'}];

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Main page', news: news });
});

module.exports = router;