Question

我是打字稿新手，并且看过各种示例，但是我想举一个简单的补丁更新例程的示例。我有以下html代码：

  <table class="details-table" *ngIf=animal && animalMetadata">
    <tr *ngFor="let attribute of animalMetadata.Attributes">
        <td class="details-property">{{ attribute.AttributeLabel }}</td>
        <td [ngSwitch]="attribute.AttributeType">

            <div *ngSwitchCase="'String'">
                <mat-form-field *ngIf="attribute.IsWritable" >
                    <input matInput type="text"  [(ngModel)]="animal[attribute.AttributeKey]"  [minlength]="attribute.AttributeTypeConfig['MinLength']"  
                    [maxlength]="attribute.AttributeTypeConfig['MaxLength']" />
                </mat-form-field>
               <span *ngIf="!attribute.IsWritable && attribute.IsReadable">{{ animal[attribute.AttributeKey] }}</span> 
            </div>

            <div *ngSwitchCase="'Boolean'">
                <mat-form-field *ngIf="attribute.IsWritable">
                    <mat-select [(ngModel)]="animal[attribute.AttributeKey]">
                        <mat-option value="true">Yes</mat-option>
                        <mat-option value="false">No</mat-option>
                    </mat-select>
                </mat-form-field>
                <span *ngIf="!attribute.IsWritable && attribute.IsReadable && animal[attribute.AttributeKey]">Yes</span>
                <span *ngIf="!attribute.IsWritable && attribute.IsReadable && !animal[attribute.AttributeKey]">No</span>           
            </div>

            <div *ngSwitchCase="'Number'">
                <mat-form-field *ngIf="attribute.IsWritable">
                    <input type="number" matInput  [(ngModel)]="animal[attribute.AttributeKey]" [min]="attribute.AttributeTypeConfig['MinValue']" 
                    [max]="attribute.AttributeTypeConfig['MaxValue']" />
                </mat-form-field>
                <span *ngIf="!attribute.IsWritable && attribute.IsReadable">{{ animal[attribute.AttributeKey] }}</span>               
            </div>

            <div *ngSwitchCase=''></div>

            <div *ngSwitchDefault>{{ animal[attribute.AttributeKey] }}
            </div>

        </td>
    </tr>
    <div>
        <button mat-button color="primary" (click)="updateAnimal()" >Submit</button>
    </div>
</table>

打字稿：

import { Component, Input } from '@angular/core';
import { animalService } from '@myapp/reference';

@Component({
    selector: 'animal-details',
    templateUrl: './animal.component.html',
    styleUrls: ['./animal.component.css']
})
export class AnimalDetailsComponent {
    @Input() animal: animalService.Animal;
    @Input() animalMetadata: animalService.AnimalMetadata;
}

我要UpdateAnimal调用我的API控制器（单独的后端服务c＃）：

 public void UpdateAnimal([FromUri] string id, [FromBody] Animal animal)
        {
            if (!string.IsNullOrWhiteSpace(animal.Id))
            {
                if (!string.Equals(id, animal.Id, StringComparison.OrdinalIgnoreCase))
                {
                    throw new ArgumentException($"Animal Id '{animal.Id}' is different from the URL '{id}'.");
                }
            }
            else
            {
                animal.Id = id;
            }

            this.UpdateAnimal(....);
        }

有人可以提供给我（不一定是代码），但是提供一个示例，说明我需要如何处理打字稿，才能在单击按钮时更新所有这些字段。非常感谢您的帮助或指导

TypeScript中的简单补丁更新示例

0 个答案: