如何在文本框中输入值后单击输入更改图像？答案

【问题标题】：How to change image on clicking enter after entering value in textbox?如何在文本框中输入值后单击输入更改图像？
【发布时间】：2022-01-21 14:57:22
【问题描述】：

“asset/image”文件夹中有一堆图片。

我们必须在文本框中查看并输入图片中可见的 pin 码。

Pin Code 将存储在 TypeScript 中创建的数组中。

输入密码后点击进入

下一张图片应该会出现
图片不应该改变
ImageId 应该改变

应该在最后一张图片到来之前发生以下事情，在最后一张图片到来之后进入enter，应该提交表单。

HTML 代码

 <html>
 <body>
   <nav>
       <div class = "navbar-header">
           <a href="#" class="navbar-brand">Image Change on clicking Enter in TextBox</a>
           <input class = "col" type = "text" readonly value ="{{imgNumber}}/3  {{cityImageId}}">
       </div>
    </nav>

<div class = "textarea" contenteditable #scrollDiv [scrollTop]="scrollDiv.scrollHeight" wrap="hard">
    <img contenteditable="false" [src]="imagePath" width = "1090px" height = "440"/>
</div>


<form>
    <div>
        <input type = "text" class="col2" [(ngModel)]="city.pinCode" (keyup.enter)="nextImage()" maxlength="6"/>
    </div>
</form>


<div>
    <input type = "label" class = "col3" value = "Pin Code" readonly />
</div>

 </body>
</html>

TypeScript 代码

import { CompileEntryComponentMetadata } from '@angular/compiler';
import { Component, OnInit } from '@angular/core';
import { CityClassification } from 'src/app/domain/cityClassification.model';
import { CityClassificationService } from 'src/app/service/city-classification.service';

@Component({
  selector: 'app-city-classification',
  templateUrl: './city-classification.component.html',
  styleUrls: ['./city-classification.component.css']
})
export class CityClassificationComponent implements OnInit {
  imgNumber : number =1;
  cityImageId : number = 101;
  imagePath : string ='assets/images/Ghazipur1.png';
  
 cityDetailArray : CityClassification[] = [];
  
 city: CityClassification = {
   pinCode : '1',
   cityImageId : 101
 }

 nextImage(){}

 constructor(private cityClassificationService: CityClassificationService) { }
 
 ngOnInit(): void {
  }

}

型号代码

  export class CityClassification{
  
    pinCode : string;
    cityImageId : number;
   
    constructor(pinCode : string, cityImageId : number){
        this.pinCode = pinCode;
        this.cityImageId = cityImageId;
    }
   
}

CSS 代码

nav {
    background-color:black;
    border : 0;
}

.navbar-header{
            text-align: center;
}
.navbar-header{
    color:white;
}
.col{
    margin-left: 950px;
    text-align: right;
    border : 0;
    background-color:rgb(160,0,0);
}

.textarea{
    overflow: scroll;
    height: 400px;
    width:1090px;
    background-color:white;
    margin-left: 100px;
    margin-top: 50px;

     object-fit: none;
     object-position: 1000px 200px;
}

.col2{
    width:230px;
    height: 30px;
    margin-top: 20px;
    margin-left: 950px;
}

.col3{
    width:230px;
    height: 30px;
    margin-top: 20px;
    margin-left: 950px;
}

我的文件结构

GitHub 代码链接 = https://github.com/Rajeev-singh-git/cityClassification

请帮我解决代码逻辑问题，我被卡住了 9 天。

【问题讨论】：

在什么情况下你想在按下回车键后改变图像？
是的，在文本框中输入值并按回车后
@Rajeev 是否有任何序列可以显示下一个可用图像？或者你想随机加载一张图片？
一个图像应该只加载一次，然后下一个图像应该来。有图像关联的图像编号
你需要这个angular-ivy-bt2lzc.stackblitz.io

标签： html css angular typescript

【解决方案1】：

我试过这个stackblitz。

这可能对你有帮助。

【讨论】：