小编Coz*_*ure的帖子

Angular 2 ng对于行和列创建了一个大的Col

显然ngfor一个接一个地生成div的分区,当它完成将所有div一个放在另一个上时,呈现一个糟糕的设计,我想得到这样的东西:

[1] [2] [3]
[4] [5] [6]
Run Code Online (Sandbox Code Playgroud)

结果我只有:

[ 1 ]
[ 2 ]
[ 3 ]
  and continues..
Run Code Online (Sandbox Code Playgroud)

我的JSON是这样的:

[
  {
    "id_nivel": "1",
    "nombre": "A",
    "constelacion": "AA",
    "descripcion": "AAAAAAAAAAAAAAAAAAAAA"
  },
  {
    "id_nivel": "2",
    "nombre": "B",
    "constelacion": "BB",
    "descripcion": "BBBBBBBBBBBBBBBBBBBBB"
  },
  {
    "id_nivel": "3",
    "nombre": "C",
    "constelacion": "CC",
    "descripcion": "CCCCCCCCCCCCCCCCCCCCC"
  },
  {
    "id_nivel": "4",
    "nombre": "D",
    "constelacion": "DD",
    "descripcion": "DDDDDDDDDDDDDDDDDDDDD"
  },
  {
    "id_nivel": "5",
    "nombre": "E",
    "constelacion": "EE",
    "descripcion": "EEEEEEEEEEEEEEEEEEEEE"
  },
  {
    "id_nivel": "6",
    "nombre": "F",
    "constelacion": "FF",
    "descripcion": "FFFFFFFFFFFFFFFFFFFF" …
Run Code Online (Sandbox Code Playgroud)

javascript typescript ngfor angular

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

FormControl 在 Angular 2 中返回空值

我正在使用表格

<form [formGroup]="form">
    <input type="text" value={{userDetails.first_name}} formControlName = "firstName">
    <button type="submit" data-action="save" (click)="onSubmit(form.value)">
</form>
Run Code Online (Sandbox Code Playgroud)

这里的userDetails.first_name价值是汤姆。它在文本框内的 UI 上可见;但是当我提交表单时form.firstName给了我空值。

angular2-forms angular2-services angular

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

在没有嵌套在TypeScript和Angular 4中的情况下,链接并合并具有结果依赖性的3个RxJS Observable

我有3个可观察链,我需要链接,第一个用于另一个2.它们必须按顺序运行,每个必须等待前一个完成.是否有可能在没有嵌套的情况下进行链接?

public observable1(): Observable<Response> {
    let headers = new Headers();
    headers.append("Content-Range", "bytes */*");
    let requestOptions = new RequestOptions({headers: headers});
    return this.http.put(url, "", requestOptions);
}

public observable2(data1url): Observable<Response> {
    let headers = new Headers();
    headers.append("Content-Range", "bytes */*");
    let requestOptions = new RequestOptions({headers: headers});
    return this.http.put(data1url, "", requestOptions);
}

public observable3(data1url): Observable<Response> {
    let headers = new Headers();
    headers.append("Content-Range", "bytes */*");
    let requestOptions = new RequestOptions({headers: headers});
    return this.http.put(data1url, "", requestOptions);
}
Run Code Online (Sandbox Code Playgroud)

这是我发现链接它们的唯一方法,但它们仍然是嵌套的,是否可以这样做而不是嵌套它们?

public doHttpProcess() {
    return this.observable1().concatMap(result1 => {
        return this.observable2(result1.json().data1) …
Run Code Online (Sandbox Code Playgroud)

observable rxjs typescript angular

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

在component.ts中找不到名称'$'

我收到错误:'在角度web-app的编译时,在组件'中找不到名字'$'.当我使用const $ : any = '';然后解决了错误但在浏览器控制台中得到另一个错误:'core.js:1440 ERROR TypeError:$不是函数'并且数据表在使用时也不起作用const $ : any = '';.

下面是我的用户组件代码.此组件用于数据表的用户列表.

users.component.ts

import {DataService} from './../services/data.service';
import {Component, OnInit} from '@angular/core';
import {API_ENDPOINT} from '../app.module';
import {Response} from '@angular/http/src/static_response';


const $: any = '';

@Component({
    selector: 'app-users',
    templateUrl: './users.component.html',
    styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {

    private url = API_ENDPOINT + '/admin_api/users';
    private users: any;

    constructor(private dataService: DataService) {
    }

    ngOnInit() {
        this.dataService.get(this.url)
            .subscribe(responce => {
                this.users = responce.data.users;
                if (this.users) …
Run Code Online (Sandbox Code Playgroud)

angular2-template angular

5
推荐指数
2
解决办法
5229
查看次数

Angular 2 iso 日期格式

如何将 ISO 日期格式化为正确的格式?服务器端返回的日期格式为:2016-12-28T11:44:00Z。

这是我的 html:

<tr *ngFor="#ticket of tickets">
   <td>{{ticket.id}}</td>
    <td>{{ticket.subject}}</td>
    <td>{{ticket.status}}</td>
    <td>{{ticket.created_at}}</td>
    <td>{{ticket.updated_at}}</td>
    <td><a [routerLink]="['SingleTicket', {'id': ticket.id}]" class="btn btn-outline-primary">View</a></td>
</tr>
Run Code Online (Sandbox Code Playgroud)

这是票务界面。

export interface Ticket {
    id: number,
    subject: string,
    description: string,
    status: string,
    submitter: number,
    created_at: Date,
    updated_at: Date
}
Run Code Online (Sandbox Code Playgroud)

angular

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

forkJoin不适用于AngularFire2 valueChanges

请帮我解决一个我正在努力的问题.

我有一组Firebase对象键

const keys = ['-Kx9pqoMWlJLbKLQcAkP', '-Kx9pqoOYlDHTJ64Was5']
Run Code Online (Sandbox Code Playgroud)

我要做的是使用一个流中的所有Firebase对象forkJoin.这就是我所拥有的:

const obj1 = this.fbService.getObj(keys[0]);
const obj2 = this.fbService.getObj(keys[1]);

forkJoin([obj1, obj2])
    .subscribe(res => {
        console.log(res);  // <-- this never happens
    };
Run Code Online (Sandbox Code Playgroud)

fbService方法是:

getObj(key): Observable<MyObj> {
  return this.fb.object(`/path/to/obj/${key}`).valueChanges();
}
Run Code Online (Sandbox Code Playgroud)

我认为这种getObj方法效果不好forkJoin,也许是因为valueChanges我正确使用它?

然而:

那么,我做错了什么?我的目标是从键数组中获取对象数组:

['-Kx9pqoMWlJLbKLQcAkP', '-Kx9pqoOYlDHTJ64Was5'] => [{prop:'val'},{prop:'val2'}]
Run Code Online (Sandbox Code Playgroud)

rxjs firebase rxjs5 angularfire2 angular

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

忽略switchMap返回值

我想解析一个observable,但我不希望返回值替换管道中的前一个值.有异步tap()吗?我需要一个像a的运算符,switchMap但我想忽略返回.

of(1).pipe(switchMap(() => of(2))).subscribe(console.log); // expected: 1
Run Code Online (Sandbox Code Playgroud)

我可以创建一个自定义运算符,但确定rxjs中内置了一些内容.

rxjs

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

如何在Angular 2中进行API调用?

已经有很多资源,但我找不到一个因某种原因而起作用的资源.举一个通用的例子:我想得到http://swapi.co/api/people的回复,这将是来自星球大战的人员列表.

import {Injectable } from '@angular/core';
import {Http, Response} from '@angular/http';
import {Observable} from 'rxjs/Observable';

import 'rxjs/add/operator/map';

@Injectable()
export class OombaDataService {
    constructor(private http: Http) {}
    private usersUrl = 'http://swapi.co/api/people/';

    getData() {
        return this.http.get(this.usersUrl)
        .map(this.extractData)
    }

    private extractData(res: Response) {
        let body = res.json();
        return body.data || { };
    }
    private handleError (error: any) {
      // In a real world app, we might use a remote logging infrastructure
      // We'd also dig deeper into the error to get …
Run Code Online (Sandbox Code Playgroud)

http angular

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

Angular 2 - 如何在addEventListener处理函数中调用typescript函数?

我试图在页面上添加到跨越的处理函数内调用另一个打字稿函数(任何类型).当我这样做时,处理函数工作正常,并将执行基本的事情,如设置变量,console.log等.但是,当试图调用任何类型的函数时,它将抛出一个错误'无法读取属性functionName of undefined ".例如,这里是有效的代码:

addListenter() {
if (!this.addListenerFired) {
  let iterateEl = this.el.nativeElement.querySelectorAll('span');
  for (let i = 0; i < iterateEl.length; i++) {
    iterateEl[i].addEventListener('click', this.showExcerptInfo);
  }
  this.addListenerFired = true;
}
showExcerptInfo (): void {
  this.selectedExcerptId = event.srcElement.id;
  console.log(this.selectedExcerptId);
}
Run Code Online (Sandbox Code Playgroud)

但是,如果我更改处理程序函数以执行以下操作(或调用位于任何位置的任何函数,即使在同一组件中),它将无法工作并抛出错误:

showExcerptInfo () {
  let excerpt = this.excerptsService.getExcerpt(this.selectedExcerptId);
}
Run Code Online (Sandbox Code Playgroud)

关于为什么会发生这种情况和/或如何解决这个问题的任何线索?

javascript typescript angular

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

使用 Rxjs 6 在 Angular 6 中返回一个空/空的 Observable

我正在使用 Rxjs 6处理Angular 6,同时我有一个关于如果响应失败或有异常返回空/空 Observable 的问题,这是我的假设,我的远程 api 将返回一个IOptionResponse对象,它包含一个消息字符串,可以被指示为“成功”或“失败”,它还包含一个模型,它是一个“IOption”对象数组

export interface IOptionResponse {
    message: string;
    model: IOption[];
}
Run Code Online (Sandbox Code Playgroud)

这是我的服务方法名称,它将返回一个 IOption 数组的 Observable,它是我的远程 API 结果的“模型”

loadIOptionMembersRelationship(): Observable<IOption[]> {
    return this.httpClient.get<IOptionResponse>('${environment.apiUrl}/api/member/XXX')
        .map(
            (response) => {
                console.log(response);
                // if response.message is success, return IOption[] model
                if (response.message == responseMessage.Success) {
                    return response.model;
                }
                else {
                    // return Observable.empty<IOption[]>(); failed
                    // return new Observable.empty<IOption[]>(); failed
                    // return new EmptyObservable<IOption[]>(); failed
                    // return new Observable<IOption[]>.from([]); failed
                    // Otherwise …
Run Code Online (Sandbox Code Playgroud)

rxjs typescript angular6 rxjs6

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