标签: angular5

启动Angular应用程序时出现以下错误.这个问题只有在我使用哈巴狗时才会发生,但代码可以正常使用html.

这是我的app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; 
import { AppComponent } from './app.component'; 
import { HeroesComponent } from './heroes/heroes.component'; 

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent,  
    HeroesComponent, 
  ], 
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我的哈巴狗

h2 {{ hero.name | uppercase}} Details
div
  span id: 
  | {{hero.id}}
div
  span name: 
  | {{hero.name}}


input([(ngmodel)]='hero.name', placeholder='name') 

任何想法如何转换该行以使角度理解该行: input([(ngmodel)]='hero.name', placeholder='name')

使用Angular,我试图将构造函数中的局部变量传递给HTML.

这是我的TS:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-random',
  templateUrl: 'random.html'
})
export class RandomPage {

  constructor(public navCtrl: NavController) {

    var restaurants = [
    'Restaurant1',
    'Restaurant2',
    'Restaurant3'
  ];

    var restaurant = restaurants[Math.floor(Math.random()*restaurants.length)];
    console.log(restaurant);
  }

}

这是我的HTML:

<ion-content padding>
  <ion-item>
    {{restaurant}}
  </ion-item>
</ion-content>

restaurant在构造函数触发时正在记录.我只是不确定如何在HTML中显示它.我错过了什么？

升级到angular-cli@1.6.3并将所有RxJS导入,方法和运算符转换为新的> 5.5表单后,我在运行时遇到类型错误,说这Observable.of不是函数.相同的错误与被定义为扩展的成员的所有方法发生Observable,例如,Observable.fromEvent.

另一方面,定义为独立函数的方法,如Observable.combineLatest运行正常,尽管编译器警告它们在类型上不存在Observable.

只是为了澄清,我对任何操作员都没有问题(在将它们转换为管道形式之后).只有方法.

我找到的解决方案是替换:

import { of } from 'rxjs/observable/of';
import { fromEvent } from 'rxjs/observable/fromEvent';
...
const x = Observable.of(true, false);
const y = Observable.fromEvent(target, 'click');

同

import { ArrayObservable } from 'rxjs/observable/ArrayObservable';
import { FromEventObservable } from 'rxjs/observable/FromEventObservable';
...
const x = ArrayObservable.of(true, false);
const y = FromEventObservable.create(target, 'click');

但我认为这应该是一个更好的方法.我对吗？

笔记:

1. 我被迫使用"Ahead Of Time compilation"功能来构建和提供应用程序,因为否则角度注入器会失败(但这是另一个问题).
2. 我知道这个其他类似问题的存在.但根据答案,那个适用于小于<5.5的RxJS版本.

3. ng --version 得到:

   Angular CLI:1.6.3,节点:8.9.1,操作系统:win32 x64,Angular:5.1.3,

   @ angular/cli:1.6.3,@ angular-devkit/build-optimizer:0.0.36,@ …

所以我有一个string []变量,我想只获取特定键的值.

例如我的字符串[]包含

{'firstname': 'john', 'lastname':'doe'}

在我看来,我只想显示姓氏.我该怎么做？

{{myString.lastname}}  

给我空白.

{{myString}}  

告诉我

{'firstname': 'john', 'lastname':'doe'}

有人知道，Angular6中的Renderer3是否会与Angular5向后兼容？在我们的库中，我们使用Renderer2，我们想知道Renderer3是否会与Angular 5向后兼容。

我需要在整个应用程序内限制退格导航。是否有解决方案，例如可以在整个应用程序的单个图块下执行的操作？

app.routing.module.ts

const routes: Routes = [
    { path: '', component: AComponent },
    ...
    { path: 'homes/:id/:rate/:item', component: HomesComponent},
    { path: 'details/:id/:name/:product', component: DetailComponent},
    ...
]

根据客户的要求，我们需要更改两个组件的房屋路径。因此，我们更新了app.routing.module.ts。

更新了app.routing.module.ts

const routes: Routes = [
    { path: '', component: AComponent },
    ...
    { path: 'homes/:id/:rate/:item', component: HomesComponent},
    { path: 'homes/:id/:name/:product', component: DetailComponent},
    ...
]

但是，由于我们在每个组件中使用的参数数量相同，因此会发生冲突，并且无法正确呈现，在所有情况下，它都路由到我们在“路由”列表中首先给出的HomesComponent。

你们有没有解决此问题的建议，而又不影响参数的路径和数量？

我有一个课程表，我想按日期排序。由于Angular 5没有orderBy管道，到目前为止，我发现的所有解决方案都只能应用于数字和字符串，如果有人可以帮助我，我将不胜感激。这是我桌子的主体

<tbody>
  <tr *ngFor="let lesson of lessons">
    <th scope="row">{{lesson.date | date:'dd.MM.yyyy H:mm'}}</th>
    <td>{{lesson.address.locationName}}</td>
    <td>{{lesson.topic}}</td>
    <td>{{lesson.homework}}</td>     
  </tr>
</tbody>

这是我的component.ts文件的片段

public lessons = [];

ngOnInit() {
this.localStorage.getItem<number>('selectedProfileId').subscribe((id) => {
     this._profileService.showLessons(id)
     .subscribe(data => this.lessons = data,
     );
   });     
 } 

我正在尝试检查用户名在spring-boot中是否唯一。我想将结果作为JSON对象发送。这是REST控制器

@RequestMapping(value="/checkEmailUnique",method=RequestMethod.POST)
public String checkEmailUnique(@RequestBody String username){

    AppUser app = userRepo.findByUsername(username);
    if(app!=null){
        // I want to return somthing like emailNotTaken: true
    }
    else{
        // and here : emailNotTaken: false  
    }
}

我想获得角度结果，以便在组件中显示错误消息。我怎样才能做到这一点？

角边

客户服务

checkEmailNotTaken(email:string){
    if(this.authService.getToken()==null) {
      this.authService.loadToken();
    }
    return this.http.post(this.host+
      "/checkEmailUnique/",{email},{headers:new HttpHeaders({'Authorization':this.authService.getToken()})});
  }

在client.component.ts中

ngOnInit() {

    this.form = this.formBuilder.group({
      prenom: ['', Validators.required],
      nom: ['', Validators.required],
      tel: ['', Validators.required],
      cin: ['', Validators.required],
      username: ['', Validators.required , Validators.email  , this.validateEmailNotTaken.bind(this)],
      passwordG: this.formBuilder.group({
        password: ['',[Validators.required,Validators.minLength(9)]],
        Confirmationpassword : ['',[Validators.required,Validators.minLength(9)]]

      }, {validator: passwordMatch})

    }); …

实际上，我想知道角度版本的实际差异-最近发布的Beta版本的8和7。

我进行了相同的研究，但无法理解这些版本的确切差异–角度7和角度8。