显然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) 我正在使用表格
<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给了我空值。
我有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) 我收到错误:'在角度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) 如何将 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) 请帮我解决一个我正在努力的问题.
我有一组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我正确使用它?
然而:
getObj 适用于获取单个Firebase对象,例如:
this.fbService.getObj(keys[0])
.subsribe(res => console.log(res))// <-- works
Run Code Online (Sandbox Code Playgroud)forkJoin 适用于简单的HTTP请求,例如
const r1 = this.http.get('https://swapi.co/api/people/1');
forkJoin([r1])
.subscribe(res => {
console.log(res); // <-- works
};
Run Code Online (Sandbox Code Playgroud)那么,我做错了什么?我的目标是从键数组中获取对象数组:
['-Kx9pqoMWlJLbKLQcAkP', '-Kx9pqoOYlDHTJ64Was5'] => [{prop:'val'},{prop:'val2'}]
Run Code Online (Sandbox Code Playgroud) 我想解析一个observable,但我不希望返回值替换管道中的前一个值.有异步tap()吗?我需要一个像a的运算符,switchMap但我想忽略返回.
of(1).pipe(switchMap(() => of(2))).subscribe(console.log); // expected: 1
Run Code Online (Sandbox Code Playgroud)
我可以创建一个自定义运算符,但确定rxjs中内置了一些内容.
已经有很多资源,但我找不到一个因某种原因而起作用的资源.举一个通用的例子:我想得到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) 我试图在页面上添加到跨越的处理函数内调用另一个打字稿函数(任何类型).当我这样做时,处理函数工作正常,并将执行基本的事情,如设置变量,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)
关于为什么会发生这种情况和/或如何解决这个问题的任何线索?
我正在使用 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) angular ×8
rxjs ×4
typescript ×4
javascript ×2
angular6 ×1
angularfire2 ×1
firebase ×1
http ×1
ngfor ×1
observable ×1
rxjs5 ×1
rxjs6 ×1