[嗨，我正在尝试创建两个单选按钮，单击它们将显示一个用于上传文件的按钮或一个用于上传的链接。但是添加单选按钮并启用onclick功能后，它仍然不起作用
<app-side-bar *ngIf="authService.isAuth"></app-side-bar>
<app-header-static></app-header-static>
<div class="web-container" [style.center]="!authService.isAuth">
<div class="challenge-create-flex">
<div class="challenge-create-content">
<section class="ev-md-container text-center ">
<div class="row">
<div class="col s12 m9 offset-m3">
<label id="choose_meth">Please upload zip file or provide the link to it to create a challenge!</label>
<mat-radio-group class="smallradio" aria-labelledby="choose_meth">
<mat-radio-button name="upload_challange" value="2" onclick="Oncheckboxclicked(value)">Upload File</mat-radio-button>
<mat-radio-button name="upload_challange" value="5" onclick="Oncheckboxclicked(value)">Provide Link</mat-radio-button>
</mat-radio-group>
<div class="file-field input-field col s6">
<form name="ChallengeCreateForm" #ChallengeCreateForm="ngForm" (ngSubmit)="challengeCreate()" novalidate>
<div class="waves-effect waves-dark btn ev-btn-dark w-300 fs-14" id="upload_file" >
<span>Upload File</span>
<input name="input_file" (change)="handleUpload($event)" accept=".json, .zip, .txt" type="file" class="text-dark-black dark-autofill w-400" [(ngModel)]="ChallengeCreateForm['input_file']">
</div>
<div class="file-path-wrapper" id="prov_url" >
<input class="file-path validate" name="file_path" type="url">
<div *ngIf="isFormError" class="wrn-msg text-highlight fs-12"> Please Upload File </div>
</div>
<div class="align-left reg-control" id="Submitbutton">
<button class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-14" type="submit" value="Submit">Submit</button>
</div>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m9 offset-m3">
<i class="fa fa-info-circle"></i>
To know how to create a challenge using zip file configuration, please see our documentation
<a href="https://evalai.readthedocs.io/en/latest/challenge_creation.html#challenge-creation-using-zip-configuration" class="highlight-link" target="_blank">here.</a>.
</div>
</div>
<div *ngIf="isSyntaxErrorInYamlFile" class="row">
<hr class="hr-line">
<div class="col s12 m9 offset-m3">
<div class="syntax-wrn-msg text-highlight">
The YAML file in the challenge configuration contains the following error - <br>
{{syntaxErrorInYamlFile}}
</div>
</div>
</div>
</section>
</div>
<app-footer [isDash]="true" *ngIf="authService.isAuth"></app-footer>
</div>
</div>
<app-footer *ngIf="!authService.isAuth"></app-footer>
和下面是打字稿
import {Component, OnInit, ViewChildren, QueryList, Inject} from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { ApiService } from '../../services/api.service';
import { GlobalService } from '../../services/global.service';
import { ChallengeService } from '../../services/challenge.service';
import { Router, ActivatedRoute } from '@angular/router';
import {DOCUMENT} from '@angular/common';
/**
* Component Class
*/
@Component({
selector: 'app-challenge-create',
templateUrl: './challenge-create.component.html',
styleUrls: ['./challenge-create.component.scss']
})
export class ChallengeCreateComponent implements OnInit {
isFormError = false;
isSyntaxErrorInYamlFile = false;
ChallengeCreateForm = {
input_file: null,
file_path: null
};
syntaxErrorInYamlFile = {};
/**
* Auth Service public instance
*/
authServicePublic = null;
/**
* Is user logged in
*/
isLoggedIn = false;
/**
* Router public instance
*/
routerPublic = null;
/**
* Selected Host team object
*/
hostTeam: any = null;
/**
* Route for hosted challenges
*/
hostedChallengesRoute = '/challenges/me';
/**
* Route path for host teams
*/
hostTeamsRoute = '/teams/hosts';
/**
* Constructor.
* @param route ActivatedRoute Injection.
* @param router Router Injection.
* @param authService AuthService Injection.
* @param document
* @param globalService GlobalService Injection.
* @param apiService ApiService Injection.
* @param challengeService ChallengeService Injection.
*/
constructor(public authService: AuthService, private router: Router, private route: ActivatedRoute,
private challengeService: ChallengeService, @Inject(DOCUMENT) private document,
private globalService: GlobalService, private apiService: ApiService) { }
/**
* Component on initialized.
*/
ngOnInit() {
if (this.authService.isLoggedIn()) {
this.isLoggedIn = true;
}
this.authServicePublic = this.authService;
this.routerPublic = this.router;
this.challengeService.currentHostTeam.subscribe((hostTeam) => {
this.hostTeam = hostTeam;
if (!hostTeam) {
setTimeout(() => {
this.globalService.showToast('info', 'Please select a host team');
}, 1000);
this.router.navigate([this.hostTeamsRoute]);
}
});
}
challengeCreate() {
if (this.ChallengeCreateForm['input_file'] !== null) {
const FORM_DATA: FormData = new FormData();
FORM_DATA.append('status', 'submitting');
FORM_DATA.append('zip_configuration', this.ChallengeCreateForm['input_file']);
this.globalService.startLoader('Creating Challenge');
this.challengeService.challengeCreate(
this.hostTeam['id'],
FORM_DATA,
).subscribe(
data => {
this.globalService.stopLoader();
this.globalService.showToast('success', 'Successfuly sent to EvalAI admin for approval.');
this.router.navigate([this.hostedChallengesRoute]);
},
err => {
this.globalService.stopLoader();
this.globalService.showToast('error', err.error.error);
this.isSyntaxErrorInYamlFile = true;
this.syntaxErrorInYamlFile = err.error.error;
},
() => {}
);
} else {
this.isFormError = true;
this.globalService.showToast('error', 'Please Upload File');
}
}
handleUpload(event) {
const files = event.target.files;
if (files.length >= 1) {
this.isFormError = false;
this.ChallengeCreateForm['input_file'] = event.target.files[0];
this.ChallengeCreateForm['file_path'] = event.target.files[0]['name'];
this.document.getElementsByClassName('file-path')[0].value = event.target.files[0]['name'];
} else {
this.isFormError = true;
}
}
Oncheckboxclicked(value: any){
if (value == 2 ) {
var urlfield =<HTMLElement>this.document.getElementById("prov_url");
var buttonshow =<HTMLElement>this.document.getElementById("SubmitButton");
urlfield.style.display = 'block';
buttonshow.style.display = 'block';
}if (value == 5) {
var filebutton = <HTMLElement>this.document.getElementById("upload_file");;
var buttonshow =<HTMLElement>this.document.getElementById("SubmitButton");
filebutton.style.display = 'block';
buttonshow.style.display = 'block';
}
return null;
}
}
错误是
未捕获的ReferenceError：未定义Oncheckboxclicked在HTMLElement.onclick
您必须使用(change)事件。像波纹管一样使用它。
<mat-radio-button name="upload_challange" value="2" (change)="Oncheckboxclicked(value)">Upload File</mat-radio-button>
<mat-radio-button name="upload_challange" value="5" (change)="Oncheckboxclicked(value)">Provide Link</mat-radio-button>
此单选按钮的选中状态更改时发出的事件。仅当值由于用户而更改时，才会发出更改事件与单选按钮的交互（与行为相同）。
请参阅他们的DOC for more details