在Angular 2中,任何人都可以向我展示一个从JSON api feed获取标题和数据的基本示例吗？我可以看到很多关于如何获取数据但没有示例来获取标题的示例.请问您能告诉我组件中的代码,然后是服务中的代码吗？
如何将字符串(将是一个URL)传递给服务？由于我的"服务"始终是一个http get请求,因此尽可能保持通用是有意义的,并让控制器将url传递给它,而不是使用不同的url制作数十个单独的控制器.
到目前为止,我的控制器如下所示:
this._httpService.getOffers()
.subscribe(
data => { this.offers = <Offer[]>data.offers; },
error => alert(error),
() => console.log("Finished")
);
在我的"服务"中它看起来像这样:
getOffers() {
return this._http.get('json/test.json')
.map(res => res.json())
}
但我想将"json/test.json"移动到控制器.
我对从服务器调用对象后如何修改对象中的值的最佳实践感到困惑.
我的TS脚本:
import { Component, OnInit } from '@angular/core';
import { Response } from '@angular/http';
import { HttpService } from "../http.service";
@Component({
selector: 'app-list-animals',
templateUrl: './list-animals.component.html',
styleUrls: ['./list-animals.component.css'],
providers: [HttpService]
})
export class ListAgentsComponent implements OnInit {
constructor(private httpService: HttpService) { }
items: any[];
ngOnInit() {
this.httpService.getData()
.subscribe(
data => { this.items = data.resource; },
error => alert(error),
() => console.log("Finished")
);
}
}
我的模板:
<table class="standardTable">
<tr *ngFor="let item of items"><td>{{item.type}}</td><td>{{item.summary}}</td><td>{{item.cost}}</td><td>{{item.available}}</td><td><a [routerLink]="['/animals/edit', item.id]">Now edit an animal</a></td></tr>
</table>
如果item.type等于"cat",我怎么能在哪里修改它来说"猫"？我在服务中更改它吗？实际的TS脚本？还是用管子？
我有以下JSON,我希望将其映射到一个表单:
{
"lineItemId": 0,
"count": 0,
"fixtures": [
{
"fixtureId": 0,
"fixtureName": "string",
"total": 0,
"completed": 0,
"guestDetails": [
{
"id": 0,
"forename": "string",
"surname": "string",
"email": "string",
"telephone": "string",
"specialInstructions": "string",
"completed": true,
"dietaryRequirements": [
{
"id": 0,
"name": "string",
"isRequired": true
}
]
}
]
}
]
}
然后我有以下工作打字稿,将其映射到formbuilder:
this.myForm = this.fBuilder.group({
guestDetailsForm: this.fBuilder.array([])
});
this.httpService.getGuestDetails(this.eventId, this.passedIdValue)
.subscribe(data => {
this.fixturesArray = data.fixtures;
console.log(this.fixturesArray);
this.fixturesArray.forEach(fixturesArrayElement => {
this.guestDetailsArray = fixturesArrayElement.guestDetails;
this.guestDetailsArray.forEach(element => {
(<FormArray>this.myForm.get('guestDetailsForm')).push(this.fBuilder.group({
id: [element.id],
forename: [element.forename], …我必须使用模板上的[innerHTML]标签通过typescript输入一些html.
我想在html上放一个click函数:
status = "<img src='assets/hello.png' (click)='hello()' />";
但点击功能被控制台剥离了:
WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
我看到有些人提到使用"DomSanitizer",但找不到修复我确切问题的例子.
如果所有字段都不符合要求的条件，如何有条件地禁用我的Vuelidate表单的“提交”按钮？
我尝试了以下内容，但:disabled只接受其中的“禁用”一词。
<form>
<ol>
<li class="inputQuestion" v-bind:class="{ 'error': $v.user.username.$error }">
<label>Username:</label>
<input v-model.trim="user.username" @input="$v.user.username.$touch()" />
</li>
<li class="inputQuestion" v-bind:class="{ 'error': $v.user.password.$error }">
<label>Password:</label>
<input v-model.trim="user.password" @input="$v.user.password.$touch()" />
</li>
<li class="submission">
<button @click.prevent="submitForm" :disabled="$v.form.valid()">Sign In</button>
</li>
</ol>
</form>
我已经在 jquery 和 Angular 1 中看到了很多关于如何在处理 ajax 请求时禁用提交按钮的方法，但不是 Angular 2。
到目前为止，我在模板上有：
<button type="submit" [disabled]="requestSent">Submit</button>
和以下在打字稿中切换它的禁用状态：
requestSent: boolean = false;
this.httpService.addNewAgent(object)
.subscribe(
data => {
this.requestSent = false;
},
error => {
console.log(error.error);
}
);
但这对每个组件来说都是相当冗长的。有没有更通用的方法来处理这个问题？也许与拦截器？
我有以下代码将新项目推送到表单数组的最末尾：
(<FormArray>this.invoicesForm.get('invoices')).push(this.fBuilder.group({
id: null,
issueDate: [null, Validators.required], // Only fill in and set the required validator for issue date if a custom date has already been chosen
invoiceIssuedStateCode: [0],
canEditIssueDate: [true],
chooseDate: [false],
issued: [false],
paidStatus: [0],
reference: [null],
creditNotes: this.buildCreditNotes([]),
lineItems: this.buildNewLineItems(this.lineItemsRecord.lineItems)
}));
但是，我需要将此项目作为数组中的倒数第二个项目推送。我该怎么办呢？