标签: angular5

我正在使用最新版本构建我的第一个角度应用程序，我需要一些帮助以在特定位置显示一些信息。

app.component.ts：

socials = [
  {
    name: 'Github',
    icon: 'fa fa-github fa-2x',
    link: 'https://www.github.com/..';
  },
  {
    name: 'Twitter',
    icon: 'fa fa-twitter fa-2x',
    link: 'https://www.twitter.com/..';
  },
  {
    name: 'Keybase',
    icon: '',
    link: 'https://keybase.io/..';
  },
...
..
.

app.component.html：

<div class="footer">
  <div class="row">
    <div class="col-sm-12 links" *ngFor="let social of socials">
      <a href={{social.link}} target="_blank">
        <i class={{social.icon}} aria-hidden="true"></i>
        <span>{{social.name}}</span>
      </a>
    </div>
  </div>
</div>

所以这个显示如下： 垂直:(

但是我我想像这样水平显示：水平:)

所以在使用* ngfor加载这些信息时我该怎么做？如果我不能，你对我有什么建议？

你好，我得到这样的错误是什么原因？

StaticInjectorError [Http]：StaticInjectorError [Http]：NullInjectorError：没有Http提供程序！在tryResolveToken（core.js：1153）的resolveToken（core.js：1211）的NullInjector.get（core.js：923）处在resolveToken（core.js :)的StaticInjector.get（core.js：1024）输入代码1211）在tryResolveToken（core.js：1153）在StaticInjector.get（core.js：1024）在resolveNgModuleDep（core.js：10585）在NgModuleRef.get（core.js：11806）在resolveDep（core.js：12302） ）

import { Injectable } from '@angular/core' import {Todo} from './Todo'

import {Http, Response,Headers,RequestOptions} from '@angular/Http' import {Observable} from 'rxjs/Observable' import 'rxjs/add/operator/do' import 'rxjs/add/operator/catch' import 'rxjs/add/operator/map'

@Injectable() export class TodoService{

constructor(private http: Http){}

todoUrl = "https://jsonplaceholder.typicode.com/todos";

getTodos():Observable{ return this.http.get("https://jsonplaceholder.typicode.com/todos") .map((res:Response)=>res.json()) .do(data=>console.log("TODOS LIST")) } }

在我的html上，我有两个具有不同布局的div。一个是桌子，另一个是几格

 <div class="firstView>
   <table class="table table-bordered">.....
     ..
    <tr *ngFor="let data of Data">
     <td>data.name</td>
    </tr>
   </table>
 </div>

 <div class="secondView">
  <div class="col-md-12" *ngFor="let data of Data">
     insert data here
  </div>

我可以使用show and hidden来以某些屏幕尺寸显示或隐藏它们。但是，由于我在两个文件中都加载了数据，所以我认为最好有一个If语句，如果screensize> 992px，则显示并渲染firstView，如果小于，则显示secondView。

如何使用带有断点作为值的ngIf语句？

使用AngularJS,这很好用:

<div style="width:10px;height:10px;background-color:{{user.color}}"></div>

但是对于Angular5,它没有.如何使用Angular5？

我需要从订阅服务调用中返回值。这是我的代码

export class RideDataSource extends DataSource<any> {

  rides: Ride[];

  constructor(private _rideService: RidesService,
              private _paginator: MatPaginator) {
    super();
  }

  connect(): Observable<Ride[]> {

this._rideService.getActiveRides(this._paginator.pageIndex, this._paginator.pageSize).subscribe(
      ridePage => {
        this.rides = ridePage.content;
        this._paginator.length = ridePage.totalElements;
      }
    );

    // i need to return  Observable.of(this.rides);
  }

  disconnect() {
    // No-op
  }

}

返回Observable.of（this.rides）将不起作用，因为this.rides将是未定义的。有什么办法吗？

这可能是一个愚蠢的问题，但是我对Angular并不陌生，还没有得到答案。

我正在关注一个教程，并为Angular 5项目设置了这样的路线：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { PageComponent } from './page/page.component';

const appRoutes: Routes = [
  {path: '', redirectTo: '/home', pathMatch: 'full'},
  {path: 'home', component: PageComponent, data: {
    page: 'home'
  }},
  {path: 'about', component: PageComponent, data: {
    page: 'about'
  }},
  {path: 'contact', component: PageComponent, data: {
    page: 'contact'
  }},
  {path: 'facebook', component: PageComponent, data: {
    page: 'facebook'
  }},
  {path: '**', redirectTo: '/home', pathMatch: 'full'}
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: …

我正在开发一个相对简单的应用程序,我想了解更多有关ngrx,redux和angular 2的信息.

我将简要介绍一下我的app,appstate和reducer的设置.

在我的应用程序中,我想使用webgl框架在我的屏幕上绘制某些对象(网格).我想通过创建具有这些网格属性的简单对象,并通过ngrx存储添加网格,并将其保存在应用程序状态中.每当添加"网格"时,我想使用ngrx sideeffects在屏幕上使用可访问webgl框架的服务绘制网格.

我的(简化)appstate看起来像这样:

export interface AppState {
    meshList: MeshListReducer.MeshListState
}

要添加网格,我创建了以下reducer函数:

case MeshActions.ADD_MESH: {
    return Object.assign({
        entities: [meshAction.payload, ...state.entities]
    });
}

case MeshActions.ADD_MESH_SUCCESS:
case MeshActions.UPDATE_MESH: {
   // This reducer function is only being called once, see below for further explanation.
   return Object.assign({}, state, {
        entities: state.entities.map(meshItem => {
            // If we can find a mesh with this id, use the sub reducer to update it.
            if (meshItem.uuid === meshAction.payload.uuid)
                 return meshSubReducer(meshItem, meshAction);

            return meshItem;
            })
        });
    } …

我想在单击按钮时更改材质垫-迷你晶圆厂按钮的颜色。

我的尝试如下。但是不起作用。

<button mat-mini-fab color="primary" #btn>Btn</button>

@ViewChild('btn') btn: ElementRef;
clicked() {
    this.btn.nativeElement.style.backgroundColor = '#5789D8';
    this.btn.nativeElement.style.color = '#FFFFFF';
}

这是我的路线：

{ path: 'market/:currency', component: MainlayoutComponent, canActivate: [AuthGuard]}

我想重定向到这样的查询参数：

市场/ btc？sidebar = home

<a [routerLink]="['/market', currency]" [queryParams]="{sidebar: 'home'}"></a>

但是当我单击其重定向市场/ BTC

有什么问题。

编辑中

这段代码有效，我还有另一个错误，但我解决了。

我有此方法可通过localstorage获取令牌，如果令牌不存在或已过期，我将调用API获取另一个令牌并将其存储到localstorage。

在这种情况下，我应该使用哪个地图，当前是否使用mergeMap或其他方式执行此操作？

public doGetToken():Observable<Token> {
    return this.loadToken().pipe( //get via localstorage
      map(token=>{
        let valid = this.validateTokenIsValid(token);
        let data = {
          token: token,
          valid: valid
        };
        return data;
      }),
      mergeMap(data=>{
        if (!data.valid) {
          return this.doApiGetToken(data.token).pipe(
            map(
              token=>{
                this.saveToken(token); //save to localstorage
                return token;
              }
            )
          );
        } else {
          return of(data.token);
        }
      })
    );

版本：Angular 5，rxjs5

先感谢您。