按下按鈕時如何將串列元素添加到Angular？

好的，所以我正在開發一個用于控制機器人的網站，我希望能夠輸入緯度和經度坐標，按下按鈕，然后將這些坐標添加到角度串列元素中。

這是網站的圖片。兩個輸入欄位和按鈕位于最右側的卡片中。基本上，我希望能夠輸入緯度和經度，點擊“添加航點”按鈕，然后我希望串列元素使用該資訊進行更新。

這是我的 html 代碼：

<mat-grid-list cols = "8" rowHeight = 350px>
<mat-grid-tile style = "background-color: royalblue;" colspan = "2">
    <mat-card>
        <mat-card-title>Rotation Data</mat-card-title>
        <mat-card-actions>
            <mat-slider class="slider" [(ngModel)] = "sliderVal1"></mat-slider>
            <mat-progress-bar
              class = "example-margin"
              [color] = "color"
              [mode] = "mode"
              [value] = "sliderVal1"
              [bufferValue] = "sliderVal1">
            </mat-progress-bar>
            <p>Pitch: {{sliderVal1}}</p>
    
            <mat-slider class="slider" [(ngModel)] = "sliderVal2"></mat-slider>
            <mat-progress-bar
              class = "example-margin"
              [color] = "color"
              [mode] = "mode"
              [value] = "sliderVal2"
              [bufferValue] = "sliderVal2">
            </mat-progress-bar>
            <p>Roll: {{sliderVal2}}</p>
        </mat-card-actions>
    </mat-card>
</mat-grid-tile>

<mat-grid-tile style = "background-color: royalblue;"  colspan = "2">
    <mat-card>
        <mat-card-title>Driving Controls</mat-card-title>
        <mat-card-actions>
            <p>Speed: {{sliderVal3}}</p>
            <mat-slider class="slider" [(ngModel)] = "sliderVal3"></mat-slider>
    
            <mat-divider></mat-divider>
            <p>Turning: {{sliderVal4}}</p>
            <mat-slider class="slider" [(ngModel)] = "sliderVal4"></mat-slider>
    
            <mat-divider></mat-divider>
            <p>Configuration Mode: 0</p>
            <button mat-button [matMenuTriggerFor]="menu">Default Driving</button>
            <mat-menu #menu="matMenu">
                <button mat-menu-item>1</button>
                <button mat-menu-item>2</button>
            </mat-menu>
    
            <div class = "reset-button">
                <button mat-button color="primary" (click) = "resetControls()">Reset Controls</button>
            </div>
        </mat-card-actions>
    </mat-card>
</mat-grid-tile>

<mat-grid-tile style = "background-color: royalblue;" colspan = "4">
    <mat-card class = "colspan-4">
        <mat-card-title>Waypoints</mat-card-title>
        <mat-card-actions>
            <mat-grid-list cols = "3" rowHeight = "85px">
                <mat-grid-tile>
                    <mat-form-field  appearance="fill">
                        <mat-label>Latitude</mat-label>
                        <input matInput type="text" [(ngModel)]="latValue">
                        <button *ngIf="latValue" matSuffix mat-icon-button aria-label="Clear" (click)="latValue=''">
                          <mat-icon>close</mat-icon>
                        </button>
                    </mat-form-field>     
                </mat-grid-tile>
                <mat-grid-tile>
                    <mat-form-field  appearance="fill">
                        <mat-label>Longitude</mat-label>
                        <input matInput type="text" [(ngModel)]="lonValue">
                        <button *ngIf="lonValue" matSuffix mat-icon-button aria-label="Clear" (click)="lonValue=''">
                          <mat-icon>close</mat-icon>
                        </button>
                    </mat-form-field>                          
                </mat-grid-tile>
                <mat-grid-tile>
                    <button mat-button color="primary">Add Waypoint</button>
                </mat-grid-tile>
                <mat-grid-tile>
                    <mat-list>
                        <div mat-subheader>Waypoints</div>
                        <mat-list-item>
                            <mat-icon mat-list-icon>place</mat-icon>
                            <div mat-line>Waypoint 1</div>
                            <div mat-line>{{latValue}}, {{lonValue}}</div>
                        </mat-list-item>
                    </mat-list>
                </mat-grid-tile>
            </mat-grid-list>
        </mat-card-actions>
    </mat-card>
</mat-grid-tile>

uj5u.com熱心網友回復：

定義一組航點以及將它們添加到 component.ts 中的方法：

  waypoints: {lat: number, lon: number}[] = [];

  addWaypoint() {
    this.waypoints.push({lat: this.latValue, lon: this.lonValue});
  }

給你的按鈕添加一個點擊事件：

<button (click)="addWaypoint()">Add Waypoint</button>

使用 *ngFor 迭代你的航點：

<div *ngFor="let waypoint of waypoints">
    <div>{{waypoint.lat}}, {{waypoint.lon}}</div>
</div>

我在這里使用了一個 div，但你可以在每個元素中使用 *ngFor （在你的例子中是 mat-list-item ）。

標籤：有角的 打字稿 角材料

上一篇：將元素推送到元素陣列時打字稿錯誤（2345）（Reactjs）

下一篇：告訴打字稿動態定義的函式