相关疑难解决方法(0)

如何在Angular 2中的本地或会话存储中存储令牌?

我想使用本地存储或会话存储中保存的身份验证令牌angular 2.0.0.我用angular2-localstorage,但它只能角2.0.0 rc.5,当我用它在2.0.0它通过我键入错误.我想使用Angular 2.0.0的默认本地存储.

local-storage angular

53
推荐指数
4
解决办法
13万
查看次数

在localStorage中存储对象

我有这样一个数组:

[{name:"test", time:"Date 2017-02-03T08:38:04.449Z"}]
Run Code Online (Sandbox Code Playgroud)

我存储它,localstorage当我从中检索数据时localstorage得到了值:

[object, object]
Run Code Online (Sandbox Code Playgroud)

我该如何解决这个问题?

config.ts

import { Injectable } from "@angular/core";

@Injectable()
export class TokenManager {

  public tokenKey: string = 'app_token';

  constructor() { }    

  store(content) {
    var contentData;

    console.log("inside localstorsge store:", content);
    contentData = content.map(
      (data) => data.name
    )
    console.log("contentData:", contentData)
    localStorage.setItem(this.tokenKey, content);
  }

  retrieve() {
    console.log("inside localstorage");
    let storedToken: any = localStorage.getItem(this.tokenKey);
    console.log("storedToken:", storedToken);//====> here this console is[object object]
    if (!storedToken) throw 'no token found';
    return storedToken;
  }

}
Run Code Online (Sandbox Code Playgroud)

javascript typescript angular

31
推荐指数
3
解决办法
4万
查看次数

Angular 6:将数据保存到本地存储

我有一个数据表,显示来自外部API的数据,我希望表页面上的items/element数量应该保存在本地存储中

这是我到目前为止所尝试的:

 ngOnInit() {
  this.moviesService.getPopularTVShows().subscribe(res => {
    this.dataSource = new MatTableDataSource(res.results);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
    localStorage.setItem(this.dataSource, this.dataSource.length);
    console.log(localStorage.length);
  });
}
Run Code Online (Sandbox Code Playgroud)

当我运行我的应用程序时,控制台显示 undefined

我的代码出了什么问题?欢迎任何帮助或建议,新手尝试新的东西.

html5 local-storage typescript angular

11
推荐指数
4
解决办法
6万
查看次数

如何在新选项卡中打开 Angular 组件?

我有大量数据要显示在屏幕上。我需要提供一个简化的列表,以便用户可以选择其中一个项目并查看其详细信息。

所以想象我有一个组件 SimpleListComponent,它将保存数据并呈现一个简化的视图

export class SimpleListComponent{
    @Input() data: any[];
}
Run Code Online (Sandbox Code Playgroud)

html

<ul>
    <li *ngFor="let item of data">
        <a>{{item.name}}</a>
    </li>
</ul>
Run Code Online (Sandbox Code Playgroud)

用户应该能够单击其中一个项目并在新选项卡中打开包含该项目详细信息的视图。所以如果我有第二个组件

export class DetailedViewComponent{
    @Input() item: any;
}
<div>
    <!--All fields of item here-->
</div>
Run Code Online (Sandbox Code Playgroud)

编辑:这里的问题是我从一个非常定制的搜索中呈现数据,所以我没有一个 ID 来从服务器获取详细信息或以任何其他方式再次获取数据。所以唯一的方法就是以某种方式传递已经加载的数据。

我怎样才能在角度上实现这一目标?将项目数据提供给第二个组件并在新选项卡中打开它?

typescript angular2-components angular

9
推荐指数
3
解决办法
3万
查看次数

如何以角度切换垫子图标?

我在 mat-table 中有多个 mat-icon(动态出现)。当我单击特定的垫子图标以切换垫子图标时,它会切换所有垫子图标,但我只想切换单击的垫子图标。这该怎么做?

按照.component.html

<table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="username">
    <th mat-header-cell *matHeaderCellDef> Full Name </th>
    <td mat-cell *matCellDef="let element"> {{element.username}} </td>
  </ng-container>

 <ng-container matColumnDef="action">
   <th mat-header-cell *matHeaderCellDef> Follow </th>
     <td mat-cell *matCellDef="let element">
       <button mat-mini-fab color="primary" (click)="toggleIcon()"><mat-icon>{{icon}}</mat-icon></button>
    </td>
 </ng-container>
</mat-table>
Run Code Online (Sandbox Code Playgroud)

跟随.component.ts

  dataSource : MatTableDataSource<PeriodicElement> ;
  displayedColumns: string[] = ['username','action'];  

toggleIcon() {
  if (this.icon === 'person_add_disabled') {
    this.icon = 'person_add';
  } else {
    this.icon = 'person_add_disabled'
  }
}

this.supportService.getUsersListForFollowing({'userid':this.userid}).
  subscribe((data) => {
   if(data.status == 1){
     this.dataSource = new MatTableDataSource<PeriodicElement>(data.payload);
   } …
Run Code Online (Sandbox Code Playgroud)

angular

2
推荐指数
1
解决办法
9572
查看次数

Angular 4+ 在切换选项卡时保留输入值

我使用 ng-bootstrap 创建 3 个选项卡,每个选项卡都是一个相互父组件内的单独组件。每个子组件包含多个文本输入,当我在子组件之间切换时,输入文本值消失了。切换标签页时如何保留所有输入值?

angular

1
推荐指数
1
解决办法
3526
查看次数