1
<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)" style="background-color:#F4F6F7;border:1px solid black">
<fieldset>
<md-radio-group class="pull-left" style="margin:10px">
<md-radio-button #ship style="font-size:13px">Pickup in the store!</md-radio-button><br>
<table>
<tr>
<span style="font-size:10px;margin:25px">(Ready in as little as 1 hour)</span></tr>
<tr>
<select placeholder="Pick here" *ngIf="ship.checked" style="margin-left:25px;width:100%">
<option *ngFor="let data of objArray" [value]="data">
{{ data}}
</option>
</select>
</tr>
</table>
<br>
<md-radio-button #ship1 value="true2" style="font-size:13px">Ship</md-radio-button><br>
<table>
<tr> <span style="font-size:10px;margin:25px">(3-5 Business Days)</span></tr>
<tr><select placeholder="Pick here" *ngIf="ship1.checked" style="margin-left:25px">
<option *ngFor="let data of objArray" [value]="data">
{{ data}}
</option>
</select></tr>
</table>
<br>
<md-radio-button #ship2 style="font-size:13px">Schedule a Delivery</md-radio-button><br>
<table>
<tr> <span style="font-size:10px;margin:25px">(Enter 5 digit ZIP code of the delivery address)</span></tr>
<tr>
<md-form-field class="example-full-width" *ngIf="ship2.checked" style="margin-left:25px"> <input mdInput placeholder="ZIP code" name="zipcode"></md-form-field><br></tr>
</table>
<br>
</md-radio-group>
<br>
</fieldset>
</form>스피 나는, 선택 옵션을해야 라디오 버튼의 3 라디오 buttons.On 선택을 포함하는 모달을 보여줄 필요가 전자 상거래 site.Here에서 작업 해당 라디오 버튼과 관련하여 표시됩니다. ngIf 조건에서 라디오 버튼 값을 사용했습니다. 그러나 작동하지 않으며 라디오 버튼을 선택하지 않고 선택 옵션이 표시됩니다. 아래 내 코드입니다 :
import { Component, OnInit } from '@angular/core';
import {Http,Response,Headers, RequestOptions} from '@angular/http';
import { Router} from '@angular/router';
import * as _ from "lodash";
import { PaginationService } from '../../pagination.service';
import { WooApiService } from 'ng2woo';
import { NgForm } from '@angular/forms';
import {
ReactiveFormsModule,
FormsModule,
FormGroup,
FormControl,
Validators,
FormBuilder,
} from '@angular/forms';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
public productsList=[];
public productArr=[];
public objArray: Array<string> = ["Albania", "Andorra", "Armenia", "Austria", "Azerbaijan"];
total:any;
currentPage:Number;
constructor(private http:Http,private router:Router,private woo: WooApiService) {
}
createAuthorizationHeader(headers: Headers) {
headers.append('Authorization', 'Basic ' +
btoa('ck_543700d9f8c08268d75d3efefb302df4fad70a8f:cs_f1514261bbe154d662eb5053880d40518367c901'));
headers.append("Content-Type", "application/json");
}
getData(){
let headers = new Headers();
this.createAuthorizationHeader(headers);
return this.http.get("https://www.colourssoftware.com/wordpress/wp-json/wc/v2/products?page=1&per_page=10",{
headers:headers
})
.subscribe(data => {
const products=data.json();
console.log(data.headers);
this.total = data.headers.get('X-WP-TotalPages');
console.log("Pages ",this.total);
for(var i=1;i<=this.total;i++){
console.log("hello "+this.total);
this.getProducts(i);
}
console.log("hello"+JSON.stringify(this.productsList));
this.dataArr();
},
err => {
console.log("Error!: ",err);
}
);
}
getProducts(i){
this.currentPage=i;
console.log("cpage "+this.currentPage);
let headers = new Headers();
this.createAuthorizationHeader(headers);
return this.http.get("https://www.colourssoftware.com/wordpress/wp-json/wc/v2/products?per_page=10&page="+this.currentPage,{
headers:headers
})
.subscribe(data => {
const products = data.json();
this.productsList.push(data.json());
console.log("hello"+JSON.stringify(this.productsList));
},
err => {
console.log("Error!: ",err);
}
);
}
dataArr(){
console.log("array"+this.productsList.length);
for(var i=0;i<this.productsList.length;i++){
this.productArr.push(this.productsList[i]);
console.log("arr"+this.productArr);
}
}
ngOnInit() {
this.getData();
}
}<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)" style="background-color:#F4F6F7;border:1px solid black">
<fieldset>
<md-radio-group class="pull-left" style="margin:10px">
<md-radio-button [(ngModel)]="store" name="store" value="true1" style="font-size:13px">Pickup in the store!</md-radio-button><br>
<span style="font-size:10px;margin:25px">(Ready in as little as 1 hour)</span><br>
<select placeholder="Pick here" *ngIf="store==true1">
<option *ngFor="let data of objArray" [value]="data" style="z-index:1">
{{ data}}
</option>
</select>
<md-radio-button [(ngModel)]="ship" name="ship" value="true2" style="font-size:13px">Ship</md-radio-button><br>
<span style="font-size:10px;margin:25px">(3-5 Business Days)</span>
<select placeholder="Pick here" *ngIf="ship==true2">
<option *ngFor="let data of objArray" [value]="data" style="z-index:1">
{{ data}}
</option>
</select>
<br>
<md-radio-button [(ngModel)]="delivery" name="delivery" value="true3" style="font-size:13px">Schedule a Delivery</md-radio-button><br>
<span style="font-size:10px;margin:25px">(Enter 5 digit ZIP code of the delivery address)</span>
<br>
<md-form-field class="example-full-width" *ngIf="delivery==true3"> <input mdInput placeholder="ZIP code" name="zipcode"></md-form-field><br>
</md-radio-group>
<br>내가 실수를 한 경우 ngIf가 작동하지 않는 이유는?
작동하지만 기본적으로 두 개의 라디오 버튼이 활성화되어 있습니다. 처음에는 활성화 할 하나만 필요합니다. – srujana
뭔가 잘못하고 있어야합니다. 각 라디오 버튼마다 다른 ID를 지정해야합니다. – Faisal
예, 다른 ID를 부여했습니다. – srujana