小编Dan*_*iel的帖子

在我看来,我有这条线:

<input placeholder="Search" type="text" ng-change="searchChange()" ng-model="mySearch" ng-model-options="{debounce: 1000}">

然后我的控制器里面有:

angular.module('app.controllers', [])

.controller('listViewCtrl', ['$scope', '$stateParams', '$http',
function ($scope, $stateParams, $http) {

    $http.get('http://www.domain.co.uk/api/search.php').
        then(function(response) {
            $scope.food = response.data;
        });

    $scope.searchChange = function() {
        console.log($scope.mySearch);   
    };         

}])

但这给了我"未定义".

如何在控制器中引用mySearch输入字段的值？

我正在尝试在Angular 2中创建一个通用数据服务,我遇到了一个奇怪的错误.本质上,我正在创建一个HTTP服务,其方法包含api url的一部分,以便我可以将它用于多种情况.例如,我想传递'projects /'并加入'api /'来获取'api/projects /'然后我可以在http调用中使用它.

我目前的dataService.ts:

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import 'rxjs/add/operator/map'
import { Observable } from 'rxjs/Observable';
import { Configuration } from '../app.constants';

@Injectable()
export class DataService {

    private actionUrl: string;
    private headers: Headers;

    constructor(private _http: Http, private _configuration: Configuration, public action: string) {

    this.actionUrl = _configuration.ApiUrl

    this.headers = new Headers();
    this.headers.append('Content-Type', 'application/json');
    this.headers.append('Accept', 'application/json');
    }

    public GetAll (action: string): Observable<any> {
        return this._http.get(this.actionUrl + action).map((response: Response) => …

我一直在研究我的应用程序.我想使用ReactiveFormsModule模块,但我得到了

错误:模块'AppModule'声明的意外模块'ReactiveFormsModule'

我已经在我的项目中安装了角度/形式,但似乎没有任何效果.任何的想法？

我的component.ts文件

import {Component} from '@angular/core';
import {FormGroup, FormControl} from '@angular/forms';


@Component({
  selector: 'app-crm-search',
  templateUrl: './crm-search.component.html',
  styleUrls: ['./crm-search.component.css'],
})
export class CrmSearchComponent{
  constructor() {
  }

  userForm = new FormGroup({
    searchTerm: new FormControl()
  });

  onSubmit(){
    console.log(this.userForm.value());
  }
}

我的app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import {AlertModule} from 'ng2-bootstrap';
import {Select2Module} from 'ng2-select2';
import {RoutingModule} from './routing.module';
import {ReactiveFormsModule} from '@angular/forms';


import {AppComponent} from './app.component';
import {NavBarComponent} from './components/nav-bar/nav-bar.component'; …

我试图让angular2演示代码在Chrome Dev Engine中运行.我完全按照这个例子,得到以下错误.

Uncaught ReferenceError: require is not defined
main.js:4 Uncaught TypeError: Cannot read property 'Component' of undefined

但是,当我将完全相同的代码放在其他地方(Python提供的静态HTML)时,它按预期工作.当我检查元素或检查背景页面时,我没有在页面上收到任何其他错误.

我也尝试右键单击该项目并执行"CSP的重构"并且没有更改错误.

function AppComponent() {}

AppComponent.annotations = [
  new angular.Component({
    selector: 'my-app'
  }),
  new angular.View({
    template: '<h1>My first Angular 2 App</h1>'
  })
];

document.addEventListener('DOMContentLoaded', function() {
  angular.bootstrap(AppComponent);
});

<script src="https://code.angularjs.org/2.0.0-alpha.19/angular2.sfx.dev.js"></script>
<my-app></my-app>

这是我的清单

{
  "manifest_version": 2,
  "name": "myApp",
  "short_name": "myApp",
  "description": "",
  "version": "0.0.1",
  "minimum_chrome_version": "38",
  "icons": {
    "16": "assets/icon_16.png",
    "128": "assets/icon_128.png"
  },
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  }
}

所以我发现问题是该片段包含的angular2_sfx.js和angular2.dev.sfx.js文件之间的区别.下面是angular2_sfx.js.将其与开发版的30k …

现在在.then第一节我们所有的另一个承诺http请求:

.then(result => { this.service().then(data => {}); });

这是使用链式承诺的正确方法吗？

我有一个工作的ionic/firebase应用程序,现在想要创建一个具有相同功能的Web应用程序.我从这个模板开始:https: //github.com/ng-lisbon/angular-firebase-seed.它是Angular 4,Firebase 3.9.

现在的问题是我想使用@input将数据从父组件传递给它的子组件.关于这一点,有很多不同的教程和线程,但我没有看到我的代码中出错了.

父HTML:

<app-child [message]="parentMessage"></app-child>

家长TS:

@Component({
    selector: 'app-tester',
    templateUrl: './collections.component.html',
    styles: [],
})
export class CollectionComponent implements OnInit {
    userEmail = '';
    alerts = [];
    collections = [];
    childData: any;

  parentMessage = "message from parent"

@Input() message: any;

    constructor(...) { 
        ...
    }

    ngOnInit() {
    }
}

儿童HTML:

{{message}}

儿童TS:

@Component({
    selector: 'app-child',
    templateUrl: './collectioninfo.component.html',
    styles: []
})
export class CollectionInfo implements OnInit {
    @Input() message: string;

    constructor(...) { 

    ngOnInit() {}
} …

我们都知道AngularJS在变化检测方面建立一个消化循环,证明效率低于Angular.

我想知道

1. Angular 如何解决这个性能问题？

2. Angular是否也有类似机制的消化循环？如果没有,它如何知道何时发生变更并需要进行变更检测？

3. 我知道Angular拥有一些功能,例如zone.js monkeypatch,单向组件树,变化检测策略,RXJS,immutableJS等.其中任何一个部分或直接驱动Angular在更改发生时更快地呈现UI.我无法通过一起正确使用这些技术来理解最终如何 Angular变得更快？

我想为我的集合标签数组中的每个保存的标签生成一个 span 元素。我使用 firebase 并进入 *ngFor 循环，我得到一个大跨度元素，其中所有保存的标签均以逗号分隔，而不是为每个标签获取一个跨度。有什么办法可以让我无法阻止这种情况的发生吗？我还为“已保存”创建了一个界面。提前致谢。

        <div class="card">
            <div class="card-body">
                <h5 class="card-title text-center">{{saved?.title}}</h5>
                <hr />
                <div *ngFor="let tag of saved.tags">
                    <span class="badge badge-pill badge-primary">{{saved?.tags}}</span>
                </div>
                <hr /> <a href="#" class="btn btn-primary  offset-4 col-md-4">View</a>

            </div>
        </div>

//Saved interface in Saved.ts file
export interface Saved {
  id: string;
  title: string;
  tags: string[];
}

我想知道如何格式化文本并使日期时间字符串的某些部分变为粗体？

例如,我想制作我当前的日期时间格式,如下所示:02/19/2018 16:00 CST到02/19/2018 16:00 CST.

这是生成当前日期时间格式的代码.

<td{{ visit['end_dte'] | date:'MM/dd/yyyy HH:mm Z'}}</td>

我尝试过这样做,<td{{ visit['end_dte'] | date:'MM/dd/yyyy <b>HH:mm Z</b>'}}</td>但它使得管道被表示为文本而不是加粗时间.

我有四个角度为4的垫子表.表A,表B,表C和表D.表C有三列.Column1,Column2,Column3.如果我想更改表C中第3列条目的字体颜色,我该怎么做？在此之前我没有任何使用角度的经验,所以请原谅我,如果我的问题太琐碎或不清楚.