在下拉选择时配置HTML正文

Question

我对Angular和typescript非常陌生；我正在开发一个应用程序，可以让您在选择下拉菜单时编辑三个字段，即SET1、SET2和SET3。

示例：我在下拉菜单中有三个项目：menu-1、menu-2和menu-3，每个菜单有三个不同的选项卡，即SET1、SET2和SET3。

因此，当我从下拉菜单中单击菜单1时，我可以编辑属于菜单1的SET1、SET2和SET3。

到目前为止，我已经能够开发SET1、SET2和SET3选项卡，但我不知道如何添加下拉列表，

SET 1ET2ET 3我的HTML文件：

<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">SET-1</label>
<div class="content">

<p>
<h2>A prime number</h2>Write a Java program to check if a given number is prime or not. Remember, a prime number is a number which is not divisible by any other number, e.g. 3, 5, 7, 11, 13, 17, etc. 
Be prepared for cross, e.g. checking till the square root of a number, etc.
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">SET-2</label>
<div class="content">
<p><h2>String Palindrome</h2>You need to write a simple Java program to check if a given String is palindrome or not. A Palindrome is a String which is equal to the reverse of itself, e.g., "Bob" is a palindrome because of the reverse of "Bob" is also "Bob."  Though be prepared with both recursive and iterative solution of this problem.
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">SET-3</label>
<div class="content">
<p><h2>Integer Palindrome</h2>This is generally asked as follow-up or alternative of the previous program. This time you need to check if given Integer is palindrome or not. An integer is called palindrome if it's equal to its reverse, e.g. 1001 is a palindrome, but 1234 is not because the reverse of 1234 is 4321 which is not equal to 1234. You can use divide by 10 to reduce the number and modulus 10 to get the last digit. This trick is used to solve this problem.
</div>
</div>
</div>
<p>Each Set contains atleast three question, select the sets from the drop down list and then edit the question given</p>

---

我的CSS文件：

.tabs {
position: relative;
min-height: 200px; /* This part sucks */
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type="radio"] {
opacity: 0;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow: hidden;
}
.content > * {
opacity: 0;
transform: translateX(-100%);
transition: all 0.6s ease;
}
[type="radio"]:focus ~ label {
ouline: 2px solid blue;
}
[type="radio"]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type="radio"]:checked ~ label ~ .content {
z-index: 1;
}
[type="radio"]:checked ~ label ~ .content > * {
opacity: 1;
transform: translateX(0);
}

---

我的.ts文件：

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-questions-set',
templateUrl: './questions-set.component.html',
styleUrls: ['./questions-set.component.css']
})
export class QuestionsSetComponent implements OnInit {
constructor() { 
}
ngOnInit() {

}
}

---

我到目前为止的工作：http://jsfiddle.net/zgua05mk/

Answer 1

您需要在component.ts文件中使用一个变量，如点击或您想要的位置，并使用一种方法进行检查，例如：

<div id="example" (click)="checked()>

在你的ts:

checked(){
this.clicked=true;
}

最后在html中(带有div(使用*ngIf操作符查看变量是否被选中(用户单击div(：

<div id="show whatever you want after the click" *ngIf="clicked==true">
//the code you need to show after user interation