添加主題角色的主體數據4

我將輸入元素的內容添加到主體請求中。所以我可以根據成員標識和合作夥伴標識撤回數據，我已經嘗試了很多東西，但沒有運氣和幫助，將不勝感激。我想使用2路數據綁定和模板驅動的形式我有FormsModule的地方。這裏是代碼添加主題角色的主體數據4

import { Component, OnInit } from '@angular/core'; 
 
import { Http } from '@angular/http'; 
 
import 'rxjs/add/operator/map'; 
 

 
const guid = function() { 
 
    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + 
 
    s4() + '-' + s4() + s4() + s4(); 
 
}; 
 

 
function s4() { 
 
    return Math.floor((1 + Math.random()) * 0x10000) 
 
    .toString(16) 
 
    .substring(1); 
 
} 
 

 
@Component({ 
 
    selector: 'app-data', 
 
    templateUrl: './data.component.html', 
 
    styleUrls: ['./data.component.css'] 
 
}) 
 
export class DataComponent implements OnInit { 
 
    memberId = 'SVR17066GYA'; 
 
    partnerId = 101; 
 

 
    constructor(public http: Http) { } 
 

 
    getMembers() { 
 

 
    // const bodyGetInfo = { 
 
    // 'PartnerId': this.partnerId, 
 
    // 'MemberId': this.memberId, 
 
    // 'Product': 'Default', 
 
    // 'CorrelationId': guid() 
 
    // }; 
 

 
    const bodyGetInfo = { 
 
     'PartnerId' : this.partnerId, 
 
     'MemberId' : this.memberId, 
 
     'Product' : 'Default', 
 
     'CorrelationId' : guid() 
 
    }; 
 

 
    return this.http.post('url') 
 
     .map(res => res.json()); 
 
    } 
 

 
    ngOnInit() { 
 

 
    this.getMembers() 
 
     .subscribe(members => { 
 
     console.log(members); 
 
     }) 
 
    } 
 
}

<input type="text" [(ngModel)]="memberId" > 
 
{{memberId}} 
 
<input type="text" [(ngModel)]="partnerId"> 
 
{{partnerId}}

來源

2017-08-03 JAM

所以，你要設置從服務器到HTML的輸入反應？

因此，首先，你在ngInit中發送請求，我想你想填寫你的表單後發送請求，然後單擊提交按鈕，所以你需要發送一個帖子（點擊）事件從提交按鈕，你需要添加到你的HTML。糾正我，如果我錯了。

來源

2017-08-03 00:43:00

謝謝您的回答。我希望實現的是在沒有提交按鈕的情況下向表單添加數據時發送請求，但是，我可以看到這也會導致另一組問題，即輸入將在每個字符輸入到形成。我會按照建議添加一個提交按鈕:) – JAM

好吧，我想通了，我想我會張貼適用於模板驅動窗體的新代碼。一旦我得到它，我將在下一個和後期建立反應形式。希望這可以幫助別人:)

import { Component } from '@angular/core'; 
 
import { Http } from '@angular/http'; 
 

 
const guid = function() { 
 
    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + 
 
    s4() + '-' + s4() + s4() + s4(); 
 
}; 
 

 
function s4() { 
 
    return Math.floor((1 + Math.random()) * 0x10000) 
 
    .toString(16) 
 
    .substring(1); 
 
} 
 

 
@Component({ 
 
    selector: 'app-data', 
 
    templateUrl: './data.component.html', 
 
    styleUrls: ['./data.component.css'] 
 
}) 
 
export class DataComponent { 
 

 
    memberId: string; 
 
    partnerId: number; 
 

 
    constructor(public http: Http) { 
 
    } 
 

 
    submit(f) { 
 
    console.log(f.value.memberId); 
 
    console.log(f.value.partnerId); 
 
    this.memberId = f.value.memberId; 
 
    this.partnerId = f.value.partnerId; 
 

 
    const bodyGetInfo = { 
 
     'PartnerId': this.partnerId, 
 
     'MemberId': this.memberId, 
 
     'Product': 'Default', 
 
     'CorrelationId': guid() 
 
    }; 
 

 
    return this.http.post('url') 
 
     .subscribe(res => { 
 
     console.log(res.json()) 
 
     }); 
 
    } 
 
}

<form novalidate #formData="ngForm" (ngSubmit)="submit(formData)"> 
 
    <input 
 
    type="text" 
 
    ngModel 
 
    name="memberId"> 
 
    
 
    <input 
 
    type="text" 
 
    ngModel 
 
    name="partnerId"> 
 
    <button class="btn btn-primary" type="submit">Submit</button> 
 
</form>

來源

2017-08-04 15:25:36 JAM

添加主題角色的主體數據4

回答

相關問題