Question

我在将 <！-/表->

Answer 1

请记住，您要在不同的状态上应用不同的状态选项
列表中的记录，下面是可以帮助您将所选选项保存到请求的记录中的内容。

步骤1）您不应创建单个变量来处理所有记录的选定选项，因为当您选择一个选项时，该变量将适用于所有记录。
根据需要删除以下变量

selectedOption: string;
savedOption: string;

第2步）在 MyTable 类中创建 state 变量。
这是保持下拉菜单中选择的值所必需的。

步骤3）在HTML中，将列表中的状态绑定到所选选项。

<tr *ngFor="let data of myTable">
   <td>{{ data.id }}</td>
   <td>{{ data.name }}</td>
   <td>{{ data.country }}</td>
   <td align="center">
     <select [(ngModel)]="data.state">
       <option disabled selected value="null">select</option>
       <option *ngFor="let o of options" [value]="o.state">{{ o.state }}</option>
     </select>
     <button class="btn btn-primary" (click)="save(data)">Save</button>
   </td>
</tr>

第4步）单击“保存”按钮，控件将转到组件类。

save(data) {
 // do your post-call here to save the current state
 // data contains the details
}

我为您创建了相同的示例。
View Demo Example

Answer 2

您需要将相应的数据和选项作为参数发送到您的服务。

为此，您可以直接从HTML中获取相关的数据对象（如果需要，也可以直接获取data.id），因为它是* ngFor（ngFor =“ let mytable data”）的一部分。这就是您的用户正在处理的数据。

在您的HTML中：

<button class="btn btn-primary" (click)="save(data)"><i class="fa fa-save"></i></button>

在您的组件中：

save(data): void {
    let dataId: string = data.id;
    this.savedOption = this.selectedOption;
    // Pass the current data.id and the selected option to your service
    this.myTableService.updateState(this.myTable, dataId, this.savedOption) 
    .subscribe(() => this.goBack());
}

为您服务：

// Update State of my_table
  updateState(myTable: MyTable, dataId: string, savedOption: string): Observable<any> {
    // now you also have the selected dataId and savedOption
    // do whatever you like

    return this.http.put(this.myTableUrl + '/update/' + dataId, myTable, httpOptions);
  }

更新：

有可能的改进（即不需要saveOption），但是我尝试将其与您的代码保持最接近，以便您可以简单地理解总体思路。

此服务用于进行API调用，以使您的数据库知道myTable及其所需的更改。并且由于您的API的外观以及它的定义方式，因此也不必（建议）通过服务将整个myTable发送回去。它将更清洁，更快和更安全。

那么您只需要满足您的情况：

data.id：由用户识别当前的工作数据
您要更改的新数据状态，在本例中为selectedOption

其余部分由您的API处理，您可以正确获取$ id和$ state（如您所见，只有2个变量，因此您的服务应该只发送相同的变量）。

HTML：

<button class="btn btn-primary" (click)="save(data.id)"><i class="fa fa-save"></i></button>

组件：

save(dataId: string): void {
    let newState: string = this.selectedOption;
    this.myTableService.updateState(dataId, newState) 
    .subscribe(() => this.goBack());
}

服务：

updateState(dataId: string, newState: string): Observable<any> {
    const url = `${this.myTableUrl}/update/${dataId}`;
    return this.http.put(url, newState, httpOptions);
  }

API：对PHP不太熟悉，但对我来说似乎很正确

希望有帮助。

Answer 3

HTML文件

<div class="box-body">
        <table id="my-table" *ngIf="myTable" datatable class="table table-borderless table-hover">
            <thead>
                <tr>
                    <th>Doctype</th>
                    <th>Sender</th>
                    <th>Receiver</th>
                    <th>Version</th>
                    <th>Direction</th>
                    <th>Count</th>
                    <th>Created</th>
                    <th>State</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let data of myTable">
                    <td>{{ data.doctype_name }}</td>
                    <td>{{ data.sender_name }}</td>
                    <td>{{ data.receiver_name }}</td>
                    <td>{{ data.doc_protocol_version }}</td>
                    <td>{{ data.direction }}</td>
                    <td>{{ data.count }}</td>
                    <td>{{ data.created }}</td>
                    <td align="center">
                        <select [(ngModel)]="data.state"> <!-- change selectedOption to data.state and [ngValue]="data.id" to [ngValue]="o.state" so that both can match-->
                            <option *ngFor="let o of options" [ngValue]="o.state">{{ o.state }}</option>
                        </select>
                        <button class="btn btn-primary" (click)="save(data)"><i class="fa fa-save"></i></button> <!-- pass the row in save function -->
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

ts文件

save(data): void {
    //data will contain the row which you wand to update
     this.savedOption = this.selectedOption;
     this.myTableService.updateState(data) // this is how to pass the id and the selected option to be updated in the MySQL table
     .subscribe(() => this.goBack());
}

如何正确整合<select>来更改表值？

3 个答案: