-1

试图在选项卡下插入“选择”组件。基本上，该选项卡仅显示一些动态表单。选择是供用户选择的字符串列表看起来我的定义是正确的。不知道为什么它搞砸了整个 angular/clarity UI 页面。

<clr-tab>
    <button clrTabLink>Submission Form</button>
    <clr-tab-content>
        &nbsp;<br>
    <label class="required" for="uniqueCertIDs">Unique Cert IDs</label>
    <div class="select">
        <select id="partnercertIDs" formControlName="EEPortalProductDetails">
        <option *ngFor="let ucertID of uniquecertIDs" [value]="ucertID.UniqueCertId">{{ucertID.UniqueCertId}} </option>
        </select>
     </div>

很可能，选择部分的范围不正确。未能找到相关文档。

4

4 回答 4

0

@nextgen-ui 关于您的第二个问题，数据绑定语法应该是on-changeor (change); ng-change是一个 AngularJS 指令。

请参阅此 Stackblitz。

于 2018-03-29T14:02:34.620 回答
0

@何塞·戈麦斯

该事件被定义为 updateCertData()

<form [formGroup]="partnersForm" >
            <div class="form-group">
                <label class="required" for="selects_1">Unique Cert IDs</label>
                <div class="select">
                <select id="selects_1" formControlName="partnerFormCertIDs" (change)="updateCertData()">
                <option *ngFor="let ucertID of uniquecertIDs" [value]="ucertID.UniqueCertId">{{ucertID.UniqueCertId}}</option>
                </select>
                </div>
            </div>
        </form>

我在事件中定义了一个 POST API

updateCertData(){
    let selectedCertID = this.partnersForm.get('partnerFormCertIDs').value;
    for ( let partnerInfo of this.uniquecertIDs) {
        if(partnerInfo.UniqueCertId == selectedCertID){
            this.extractSubmit(this.cert);
            this.submit[0].Option[0].value = partnerInfo.ProductId;
            this.submit[0].Option[1].value = partnerInfo.ProductName;
            this.certsService.setSubmissionProduct(this.certId, this.submit);
            break;
        }
    }
}

this.certsService.setSubmissionProduct 是一个 POST API，将数据发送回 UI Server

setSubmissionProduct(sessionId: string, info:any){
    let body = {'submitConfig': info};
    let url = GLOBALS.baseUrl + "session/" + sessionId + "/submitproduct";
    return this.post(url, body);
}

this.post 永远不会成功地向控制器发送消息。我尝试了其他几种发布方法，这些方法在其他逻辑部分效果很好，但是如果将其放入此“更改”事件中，则永远不会成功发送消息。

于 2018-04-02T01:55:36.850 回答
0 
<form [formGroup]="partnersForm" >
    <div class="form-group">
        <label class="required" for="selects_1">Unique Cert IDs</label>
            <div class="select" >
                <select id="selects_1" formControlName="partnerFormCertIDs" ng-change="selectAction()">
                  <option *ngFor="let ucertID of uniquecertIDs" [value]="ucertID.UniqueCertId" >{{ucertID.UniqueCertId}}</option>
                </select>
        </div>
    </div>
</form>

在我的 Session.ts 文件中。使用控制台调试，警报永远不会出现

selectAction() {
    alert("selected value changed !!!!");
}
于 2018-03-28T12:32:25.623 回答
0

如果没有一个运行的例子，很难说发生了什么。我在选项卡中创建了一个带有选择的简单表单，它似乎没问题。

这是我的标签的模板代码：

          <clr-tabs>
            <clr-tab>
                <button clrTabLink id="link1">Tab1</button>
                <clr-tab-content id="content1" *clrIfActive>
                  <h3>Form 1</h3>
                  <form>
                    <div class="form-group">
                        <label for="selects_1">This is a select box</label>
                        <div class="select">
                          <select id="selects_1">
                            <option>Select</option>
                            <option *ngFor="let user of users" [value]="user">{{user}} </option>
                          </select>
                        </div>
                    </div>
                  </form>
                </clr-tab-content>
            </clr-tab>
        </clr-tabs>

你可以在这里看到这个运行：https ://stackblitz.com/edit/so-tabs-form-select

如果这不能解决您的问题，您可以分叉 StackBlitz 并在那里重新创建它吗？

于 2018-03-26T16:35:15.260 回答