如何在按下按钮时将列表元素添加到 Angular？

Question

好的，所以我正在开发一个用于控制机器人的网站，我希望能够输入纬度和经度坐标，按下一个按钮，然后将这些坐标添加到 angular 列表元素.

这是网站的图片。两个输入字段和按钮位于最右侧的卡片中。基本上，我希望能够输入纬度和经度，点击 'Add Waypoint' 按钮，然后我希望列表元素使用该信息进行更新。

这是我的 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 class="example-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 class="example-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>

Answer 1

定义 waypoints 数组以及将它们添加到 component.ts 中的方法：

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

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

向您的按钮添加点击事件：

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

用 *ngFor:

迭代你的 waypoints

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

我在这里使用了 div，但您可以在每个元素（在您的情况下为 mat-list-item）中使用 *ngFor。

如何在按下按钮时将列表元素添加到 Angular？

How do I add list elements to Angular when a button is pressed?

typescript

angular-material

angular