小编Bob*_*ang的帖子

大家好:我有一个组件.组件视图有一个表:

<div class="container">
<h2>Recipients List</h2>
<br>
<table class="table table-striped">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Phone</th>
            <th>Status</th>
            <th>Select</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="#rp of arrAll">   
            <td>{{rp.id}}</td>             
            <td>{{rp.name}}</td>
            <td>{{rp.phone}}</td>                
            <td>{{rp.isActivated?'Active':'Inactive'}}</td>             
            <td>
                <input #{{rp.id}}  type="checkbox" (change)="checkbox(value)">
            </td>
        </tr>          
    </tbody>
</table>

<button class="btn btn-success" (click)="newRecipient()">New Recipient</button>
<button class="btn btn-danger pull-right" (click) ="deleteRecipients()">Delete Recipients</button>

这是使用*ngFor生成的表视图图像的链接.

业务逻辑是"单击删除按钮时,必须删除所有已检查的收件人".我想将一个参数传递给我的删除函数(我认为应该是一个包含已检查的收件人ID的数组)

这是我的组件代码:

import {Component} from 'angular2/core';
import {CORE_DIRECTIVES} from 'angular2/common';
import { Router, RouteParams } from 'angular2/router';
import {RecipientsService}    from'../../services/recipients/recipients.service';
import {Recipient} from '../../models/recipient/recipient';

@Component({
selector: 'recipient-list-view',
templateUrl: './app/components/recipient-list-view/recipient-list-view.html', …

我在angular2项目中有一个loadSize()函数,它在我的服务中调用getTotalNumberCampaigns()并返回一个observable.并且我订阅了这个observable以获得结果.

这是我的loadSize()

   loadSize() {
    this.campaignsService.getTotalNumberCampaigns().subscribe(value => {//async call
        this.campaignSize = value;
    }, (err)=> {}

    );
}

假设我的getTotalNumberCampaigns()出错,它会在订阅中触发err => {}.我的问题是我如何知道httpreponse状态代码是什么,以便我可以指示用户采取不同的操作(如果连接失败(502),用户应刷新.如果是access_token到期(500),页面应该跳到登录页面)

这是我在服务类中的getTotalNumberCampaigns

 getTotalNumberCampaigns(): Observable<number> {
    return this.http.get(`${this.apiUrl}/Count`, { headers: this.headers })
        .map<number>(res => <number>res.json())
}

我正面临一个问题.我希望在angular2中获得一个htmlelement,这是我的看法

<p>
    <button (click)="setJSON()">Set JSON</button>
    <button (click)="getJSON()">Get JSON</button>
</p>
<div id="jsoneditor">

</div>

我想访问我班级中的jsoneditor并将其传递给我的JSONEditor https://github.com/josdejong/jsoneditor/blob/master/docs/api.md告诉它在哪里渲染编辑器.

这是我的班级:

export class JsonComponent {

    container: HTMLElement;
    editor1: JSONEditor;
    options;

    constructor(public router: Router, public element: ElementRef) {

        this.container = this.element.nativeElement

        this.options = { "mode": "tree", "search": true };            
        this.editor1 = new JSONEditor(this.container,this. options);
        var json = {
            "Array": [1, 2, 3],
            "Boolean": true,
            "Null": null,
            "Number": 123,
            "Object": { "a": "b", "c": "d" },
            "String": "Hello World"
        };
        this. editor1.set(json);
        this. editor1.expandAll();
    }                  

    setJSON() { …

这是我在angular2项目中的服务,我想在服务中使用create方法来调用我的控制器.

 create(maillingId: string, name: string, phone: string): Observable<void> {      
    var rp = new RecipientDto(maillingId, name, phone);

    console.log(JSON.stringify(rp));
    console.log(this.apiUrl);
    console.log(this.headers); 

    return this.http.post(this.apiUrl, JSON.stringify(rp), { headers: this.headers })
        .do(null,
        () => {
        })
        .map<any>(response => { });

}

这是我打印出来的 这是我可行的邮递员电话 最后是我的控制器代码

 [HttpPost]
    public IActionResult Post([FromBody]RecipientDto recipientDto)
    {
        MailingList ml = _repository.Get<MailingList>(recipientDto.MaillingId);

        if (ml != null)
        {               
            var rp = new Recipient(Guid.NewGuid());             
            rp.IsActivated = true;
            rp.Name = recipientDto.Name;
            rp.PhoneNumber = recipientDto.Phone;
            ml.Recipients.Add(rp);        
            return Ok();
        }
        return HttpNotFound();          
    }

有一点需要注意的是,当我的前端创建方法被调用时,没有fiddler记录.

同样的删除问题(也不要调用api),但getAll()是可行的

 getAll(id:string): Observable<Recipient[]> { …