Angular 如何正确整合<；选择>；要更改表值？

我很难将

标记集成到我的表中，在表中，我希望有一个选项可以通过相应的id更改单元格值。此外，我认为我需要在API上更正一些内容。我只是个新手。任何帮助都将不胜感激

我的表格.component.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)]="selectedOption">
                        <option *ngFor="let o of options" [ngValue]="data.id">{{ o.state }}</option>
                    </select>
                    <button class="btn btn-primary" (click)="save()"><i class="fa fa-save"></i></button>
                </td>
            </tr>
        </tbody>
    </table>
    <!-- / table -->
</div>

// Update state of my_table
$app->map(['GET', 'PUT'],'/my_table/update/{id}', function($req, $res, $args) {

    $err_msg = array('error' => 'Unable to update!');
    $succ_msg = array('success' => 'Updated successfully!');

    $id = $req->getAttribute('id');
    $state = $req->getParsedBody()['state'];

    $query = "UPDATE my_table
              SET state = '$state'
              WHERE id = '$id'";

    $result = mysql_query($query) or die(json_encode($err_msg));

    if($result) {
        return json_encode($succ_msg);
    }

    mysql_close($conn);
});

my table.services.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Location } from '@angular/common';
import { Router } from '@angular/router';

import { MyTable } from './../my-table';
import { MyTableService } from './../my-table.service';

@Component({
  selector: 'app-my-table',
  templateUrl: './my-table.component.html',
  styleUrls: ['./my-table.component.css'],
  providers: [MyTableService]
})

export class MyTableComponent implements OnInit {

    myTable: MyTable[];

    selectedOption: string;
    savedOption: string;

    options = [
        { state: "MSG_ERROR" },
        { state: "MSG_WAIT_FA" },
        { state: "MSG_WAIT_BATCH" },
        { state: "MSG_COMPLETE" }
    ]

    constructor(
            private myTableService: MyTableService,
            private location: Location,
            private router: Router
        ) { }

    ngOnInit() {

        this.myTableService.getMyTables()
        .subscribe(myTable => this.myTable = myTable);
    }

    save(): void {

        this.savedOption = this.selectedOption;
        this.myTableService.updateState() // How to pass the id and the selected option to be updated in the MySQL table
        .subscribe(() => this.goBack());
    }

    goBack(): void {

        this.location.back();
    }

}

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Observable } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';

import { MyTable } from './b2b-status';

const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class MyTableService {

  constructor(private http: HttpClient) { }

  private myTableUrl = 'http://api/to/my/table';


  getMyTables (): Observable<MyTable[]> {

    return this.http.get<MyTable[]>(this.myTableUrl + '/error_state');
  }

  // Update State of my_table
  updateState(myTable: MyTable): Observable<any> {

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

更新我忘了添加

MyTable

类：

export class MyTable {

    id: number;
    doctype_name: string;
    sender_name: string;
    receiver_name: string;
    doc_protocol_version: string;
    message_type: string;
    direction: string;
    state: string;
    current_state: string;
    created: string;
    updated: string;
    updated_by: string;
    count: number;
    error: string;
}

---

记住您希望在不同的服务器上应用不同的状态选项
下面列表中的记录将帮助您将所选选项保存到请求的记录中

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

selectedOption: string;
savedOption: string;

步骤2）在MyTable类中创建状态变量。
这是保持下拉列表中选定值所必需的

步骤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>

我已经为您创建了相同的示例。

---

记住，您希望在不同的服务器上应用不同的状态选项
下面列表中的记录将帮助您将所选选项保存到请求的记录中

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

selectedOption: string;
savedOption: string;

步骤2）在MyTable类中创建状态变量。
这是保持下拉列表中选定值所必需的

步骤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>

我已经为您创建了相同的示例。

---

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

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

在HTML中：

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

为您服务：

// 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);
  }

服务：

// 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);
  }

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

updateState（dataId:string，newState:string）：可观察{
常量url=`${this.myTableUrl}/update/${dataId}`；
返回this.http.put（url、newState、httpOptions）；
}

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

---

希望有帮助。

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

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

在HTML中：

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

为您服务：

// 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);
  }

服务：

// 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);
  }

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

updateState（dataId:string，newState:string）：可观察{
常量url=`${this.myTableUrl}/update/${dataId}`；
返回this.http.put（url、newState、httpOptions）；
}

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

希望有帮助。

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>

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>

---

有默认状态吗？有默认状态吗？很抱歉问这个问题，但是你能包括

save（）

和

updateState（）

的函数吗？很抱歉问这个问题，但是你能包括

save（）

和

updateState（）

的函数吗？我的错，我还以为你是同一个人呢。只是拒绝我的编辑，它正在工作，但我认为，我的API有问题。它将状态数据变为空白。糟糕，我以为你是同一个人。只是拒绝我的编辑，它正在工作，但我认为，我的API有问题。它将状态数据变为空白。